larkup 0.1.14

package/components/ui/tabs.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground  focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "border shadow-none! data-active:border-border cursor-pointer",
+        // "border shadow-none!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground  disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/components/ui/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/components/workspace/delete-server-dialog.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { useState } from "react"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { useWorkspace, type WorkspaceServer } from "./workspace-provider"
+
+interface Props {
+  target: WorkspaceServer | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function DeleteServerDialog({ target, open, onOpenChange }: Props) {
+  const { deleteServer } = useWorkspace()
+  const [busy, setBusy] = useState(false)
+
+  async function confirm() {
+    if (!target) return
+    setBusy(true)
+    try {
+      await deleteServer(target.id)
+      toast.success(`Deleted "${target.name}".`)
+      onOpenChange(false)
+    } catch {
+      toast.error("Could not delete the server.")
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete &ldquo;{target?.name}&rdquo;?</DialogTitle>
+          <DialogDescription>
+            This permanently removes the server&apos;s documents, index, vector
+            data, and generated files. This cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={busy}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => void confirm()}
+            disabled={busy}
+          >
+            {busy && <Loader2 className="size-4 animate-spin" />}
+            Delete server
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/workspace/server-form-dialog.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useWorkspace, type WorkspaceServer } from "./workspace-provider"
+
+interface Props {
+  mode: "create" | "rename"
+  target?: WorkspaceServer | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ServerFormDialog({ mode, target, open, onOpenChange }: Props) {
+  const { createServer, renameServer } = useWorkspace()
+  const [name, setName] = useState("")
+  const [busy, setBusy] = useState(false)
+
+  // Seed the field whenever the dialog opens.
+  useEffect(() => {
+    if (open) setName(mode === "rename" ? (target?.name ?? "") : "")
+  }, [open, mode, target])
+
+  async function submit() {
+    const trimmed = name.trim()
+    if (!trimmed) {
+      toast.error("Enter a server name.")
+      return
+    }
+    setBusy(true)
+    try {
+      if (mode === "create") {
+        const created = await createServer(trimmed)
+        if (created) toast.success(`Created "${created.name}" and switched to it.`)
+      } else if (target) {
+        await renameServer(target.id, trimmed)
+        toast.success("Server renamed.")
+      }
+      onOpenChange(false)
+    } catch {
+      toast.error("Something went wrong. Try again.")
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {mode === "create" ? "New RAG server" : "Rename server"}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === "create"
+              ? "Each server is an isolated RAG project with its own documents, index, and deployable artifact."
+              : "Give this server a clearer name."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-2">
+          <Label htmlFor="server-name">Server name</Label>
+          <Input
+            id="server-name"
+            value={name}
+            autoFocus
+            placeholder="e.g. docs-assistant"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void submit()
+            }}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={busy}
+          >
+            Cancel
+          </Button>
+          <Button onClick={() => void submit()} disabled={busy}>
+            {busy && <Loader2 className="size-4 animate-spin" />}
+            {mode === "create" ? "Create server" : "Save"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/workspace/server-switcher.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Check,
+  ChevronsUpDown,
+  Pencil,
+  Plus,
+  Server,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useWorkspace, type WorkspaceServer } from "./workspace-provider";
+import { ServerFormDialog } from "./server-form-dialog";
+import { DeleteServerDialog } from "./delete-server-dialog";
+import { Separator } from "../ui/separator";
+
+export function ServerSwitcher() {
+  const { servers, activeServer, activateServer } = useWorkspace();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [renameTarget, setRenameTarget] = useState<WorkspaceServer | null>(
+    null,
+  );
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceServer | null>(
+    null,
+  );
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <button
+              type="button"
+              className="flex min-w-[200px] md:min-w-[240px] items-center gap-2 rounded-lg border border-border bg-card px-2 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          }
+        >
+          <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/12 text-primary">
+            <Server className="size-3.5" />
+          </span>
+          <span className="flex min-w-0 flex-1 flex-col">
+            {/* <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              Server
+            </span> */}
+            <span className="flex items-center gap-1.5">
+              <span className="truncate text-sm font-medium text-foreground">
+                {activeServer?.name ?? "No server"}
+              </span>
+              {activeServer?.running && <RunningDot />}
+            </span>
+          </span>
+          <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align="start"
+          sideOffset={6}
+          className="w-(--anchor-width) min-w-[260px]"
+        >
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Your servers</DropdownMenuLabel>
+            {servers.map((s) => {
+              const active = s.id === activeServer?.id;
+              return (
+                <DropdownMenuItem
+                  key={s.id}
+                  onClick={() => {
+                    if (!active) void activateServer(s.id);
+                  }}
+                  className="gap-2"
+                >
+                  <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                    <Server className="size-3.5" />
+                  </span>
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium">{s.name}</span>
+                    <span className="flex items-center gap-2 text-[11px] text-muted-foreground tabular-nums">
+                      <span>{s.docCount} docs</span>
+                      {s.indexed && <span>· indexed</span>}
+                      {s.running && (
+                        <span className="flex items-center gap-1 text-green-500">
+                          <RunningDot />
+                          live
+                        </span>
+                      )}
+                    </span>
+                  </span>
+                  {active && <Check className="size-4 shrink-0 text-primary" />}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuGroup>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onClick={() => setCreateOpen(true)}
+            className="gap-2 h-9"
+          >
+            <Plus className="size-4" />
+            New server
+          </DropdownMenuItem>
+          {/* <DropdownMenuSeparator /> */}
+          {activeServer && (
+            <DropdownMenuItem
+              onClick={() => setRenameTarget(activeServer)}
+              className="gap-2 h-9"
+            >
+              <Pencil className="size-4" />
+              Rename current
+            </DropdownMenuItem>
+          )}
+          {activeServer && servers.length > 1 && (
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => setDeleteTarget(activeServer)}
+              className="gap-2"
+            >
+              <Trash2 className="size-4" />
+              Delete current
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ServerFormDialog
+        mode="create"
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+      <ServerFormDialog
+        mode="rename"
+        target={renameTarget}
+        open={renameTarget !== null}
+        onOpenChange={(o) => !o && setRenameTarget(null)}
+      />
+      <DeleteServerDialog
+        target={deleteTarget}
+        open={deleteTarget !== null}
+        onOpenChange={(o) => !o && setDeleteTarget(null)}
+      />
+    </>
+  );
+}
+
+function RunningDot() {
+  return (
+    <span className="relative flex size-2">
+      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+      <span className="relative inline-flex size-2 rounded-full bg-green-500" />
+    </span>
+  );
+}

package/components/workspace/workspace-provider.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  type ReactNode,
+} from "react"
+import useSWR, { mutate as globalMutate } from "swr"
+import type { WorkspaceMode } from "@larkup/core/workspace"
+
+/** A workspace server enriched with the per-server status the UI shows. */
+export interface WorkspaceServer {
+  id: string
+  name: string
+  port: number
+  createdAt: string
+  updatedAt: string
+  docCount: number
+  indexed: boolean
+  running: boolean
+  endpoint: string
+}
+
+interface WorkspaceData {
+  username: string | null
+  activeServerId: string | null
+  servers: WorkspaceServer[]
+  mode: WorkspaceMode | null
+}
+
+interface WorkspaceContextValue {
+  isLoading: boolean
+  username: string | null
+  servers: WorkspaceServer[]
+  activeServer?: WorkspaceServer
+  /** No servers exist yet → run first-time onboarding. */
+  isFirstRun: boolean
+  /** User-selected mode: tech, simple, or null (not yet chosen). */
+  mode: WorkspaceMode | null
+  refresh: () => void
+  createServer: (name: string) => Promise<WorkspaceServer | undefined>
+  activateServer: (id: string) => Promise<void>
+  renameServer: (id: string, name: string) => Promise<void>
+  deleteServer: (id: string) => Promise<void>
+  setUsername: (name: string) => Promise<void>
+  setMode: (mode: WorkspaceMode) => Promise<void>
+}
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+const WorkspaceContext = createContext<WorkspaceContextValue | null>(null)
+
+export function useWorkspace() {
+  const ctx = useContext(WorkspaceContext)
+  if (!ctx) {
+    throw new Error("useWorkspace must be used within a WorkspaceProvider")
+  }
+  return ctx
+}
+
+export function WorkspaceProvider({ children }: { children: ReactNode }) {
+  const { data, isLoading, mutate } = useSWR<WorkspaceData>(
+    "/api/servers",
+    fetcher,
+    { revalidateOnFocus: false },
+  )
+
+  const servers = data?.servers ?? []
+  const activeServer = servers.find((s) => s.id === data?.activeServerId)
+  const isFirstRun = !isLoading && servers.length === 0
+
+  /** Revalidate every SWR key — used after switching the active server so all
+   * stage pages reflect the newly selected server. */
+  const refreshAllStages = useCallback(async () => {
+    await globalMutate(() => true)
+  }, [])
+
+  const createServer = useCallback(
+    async (name: string) => {
+      const res = await fetch("/api/servers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      })
+      const json = await res.json()
+      await mutate()
+      await refreshAllStages()
+      return json.server as WorkspaceServer | undefined
+    },
+    [mutate, refreshAllStages],
+  )
+
+  const activateServer = useCallback(
+    async (id: string) => {
+      await fetch("/api/servers", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "activate", serverId: id }),
+      })
+      await mutate()
+      await refreshAllStages()
+    },
+    [mutate, refreshAllStages],
+  )
+
+  const renameServer = useCallback(
+    async (id: string, name: string) => {
+      await fetch("/api/servers", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "rename", serverId: id, name }),
+      })
+      await mutate()
+    },
+    [mutate],
+  )
+
+  const deleteServer = useCallback(
+    async (id: string) => {
+      await fetch(`/api/servers?id=${encodeURIComponent(id)}`, {
+        method: "DELETE",
+      })
+      await mutate()
+      await refreshAllStages()
+    },
+    [mutate, refreshAllStages],
+  )
+
+  const setUsername = useCallback(
+    async (name: string) => {
+      await fetch("/api/servers", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "setUsername", username: name }),
+      })
+      await mutate()
+    },
+    [mutate],
+  )
+
+  const setModeAction = useCallback(
+    async (mode: WorkspaceMode) => {
+      await fetch("/api/servers", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "setMode", mode }),
+      })
+      await mutate()
+    },
+    [mutate],
+  )
+
+  const value: WorkspaceContextValue = {
+    isLoading,
+    username: data?.username ?? null,
+    servers,
+    activeServer,
+    isFirstRun,
+    mode: data?.mode ?? null,
+    refresh: () => {
+      void mutate()
+    },
+    createServer,
+    activateServer,
+    renameServer,
+    deleteServer,
+    setUsername,
+    setMode: setModeAction,
+  }
+
+  return (
+    <WorkspaceContext.Provider value={value}>
+      {children}
+    </WorkspaceContext.Provider>
+  )
+}