larkup 0.1.29 → 0.1.31

package/archive/redesign-v2/components/app-sidebar.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  FileStack,
+  FlaskConical,
+  Lock,
+  type LucideIcon,
+  MessageCircle,
+  Server,
+  SlidersHorizontal,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { STAGES, CURRENT_PHASE } from "@larkup/core/stages";
+import type { StageId } from "@larkup/core/types";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  useThemeCustomizer,
+  type PanelBgVariant,
+} from "./theme-customizer-provider";
+import { ThemeSwitcher } from "./theme-switcher";
+
+const NAV_BG_COLORS: Record<PanelBgVariant, string | undefined> = {
+  "panel-default": undefined,
+  "panel-white": "#FFFFFF",
+  "panel-fafafa": "#F4F4F4",
+  "panel-warm": "#F7F1EA",
+  "panel-soft": "#FBFAF8",
+  "panel-silver": "#F8F8F8",
+  "panel-stone": "#F5F5F2",
+};
+
+// [#CDA1FE]
+const STAGE_ICONS: Record<StageId, LucideIcon> = {
+  configure: SlidersHorizontal,
+  data: FileStack,
+  server: Server,
+  demo: FlaskConical,
+  chat: MessageCircle,
+};
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const { pageStyle, navBg } = useThemeCustomizer();
+
+  const navColor = navBg ? NAV_BG_COLORS[navBg] : undefined;
+  const navStyle = navColor ? { backgroundColor: navColor } : undefined;
+
+  return (
+    <TooltipProvider delay={150}>
+      <aside
+        className={cn(
+          "sticky top-0 hidden h-screen w-[84px] shrink-0 flex-col items-center gap-1 self-start py-3 md:flex",
+          !navColor ? "bg-background" : "",
+          pageStyle === "fused" ? "border-r border-border" : "",
+        )}
+        style={navStyle}
+      >
+        {/* Brand */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Link
+                href="/configure"
+                aria-label="larkup home"
+                className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-transform hover:scale-105"
+              />
+            }
+          >
+            {/* <Boxes className="size-5" /> */}
+            <img src={"/logo9.png"} className="size-6.5" alt="logo" />
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={10}>
+            Larkup
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Pipeline rail */}
+        <nav className="flex flex-1 flex-col items-center gap-4.5 ">
+          {STAGES.map((stage) => {
+            const Icon = STAGE_ICONS[stage.id];
+            const active =
+              pathname === stage.href ||
+              (stage.href === "/configure" && pathname === "/");
+            const locked = stage.phase > CURRENT_PHASE;
+
+            const body = (
+              <>
+                {/* active accent bar (Teams-style) */}
+                <span
+                  className={cn(
+                    "absolute left-0 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r-full bg-primary transition-opacity",
+                    active ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "relative flex size-9 items-center justify-center rounded-xl transition-colors",
+                    active
+                      ? "bg-white border text-primary"
+                      : locked
+                        ? "text-muted-foreground/50"
+                        : "text-foreground/70 group-hover:bg-white/90 group-hover:text-foreground",
+                  )}
+                >
+                  <Icon
+                    className="size-[19px]"
+                    strokeWidth={active ? 2.25 : 2}
+                  />
+                  {locked && (
+                    <span className="absolute -right-0.5 -top-0.5 flex size-3.5 items-center justify-center rounded-full bg-background">
+                      <Lock className="size-2.5 text-muted-foreground" />
+                    </span>
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    "text-[10px] leading-none tracking-tight",
+                    active
+                      ? "font-semibold text-primary"
+                      : locked
+                        ? "text-muted-foreground/50"
+                        : "text-muted-foreground",
+                  )}
+                >
+                  {stage.label}
+                </span>
+              </>
+            );
+
+            return (
+              <Tooltip key={stage.id}>
+                <TooltipTrigger
+                  render={
+                    locked ? (
+                      <div
+                        aria-disabled
+                        className="group relative flex w-16 cursor-not-allowed flex-col items-center gap-0.5 rounded-2xl py-1"
+                      />
+                    ) : (
+                      <Link
+                        href={stage.href}
+                        aria-current={active ? "page" : undefined}
+                        className="group relative flex w-16 flex-col items-center gap-0.5 rounded-2xl py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      />
+                    )
+                  }
+                >
+                  {body}
+                </TooltipTrigger>
+                <TooltipContent
+                  side="right"
+                  sideOffset={10}
+                  className="max-w-56"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-medium">
+                      {stage.label}
+                      {locked && (
+                        <span className="ml-1.5 font-mono text-[10px] opacity-70">
+                          Phase {stage.phase}
+                        </span>
+                      )}
+                    </span>
+                    <span className="text-[11px] leading-snug opacity-80">
+                      {locked
+                        ? `Unlocks in Phase ${stage.phase}.`
+                        : stage.description}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </nav>
+
+        {/* Footer — dual-mode indicator */}
+        <ThemeSwitcher floating={false} />
+      </aside>
+    </TooltipProvider>
+  );
+}

package/archive/redesign-v2/components/app-topnav.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  FileStack,
+  FlaskConical,
+  Layers,
+  Lock,
+  type LucideIcon,
+  MessageCircle,
+  Server,
+  SlidersHorizontal,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { STAGES, CURRENT_PHASE } from "@larkup/core/stages";
+import type { StageId } from "@larkup/core/types";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ServerSwitcher } from "@/components/workspace/server-switcher";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+import { ThemeSwitcher } from "./theme-switcher";
+import { useThemeCustomizer, type PanelBgVariant } from "./theme-customizer-provider";
+
+const NAV_BG_COLORS: Record<PanelBgVariant, string | undefined> = {
+  "panel-default": undefined,
+  "panel-white": "#FFFFFF",
+  "panel-fafafa": "#F4F4F4",
+  "panel-warm": "#F7F1EA",
+  "panel-soft": "#FBFAF8",
+  "panel-silver": "#F8F8F8",
+  "panel-stone": "#F5F5F2",
+};
+
+const STAGE_ICONS: Record<StageId, LucideIcon> = {
+  configure: SlidersHorizontal,
+  data: FileStack,
+  index: Layers,
+  server: Server,
+  demo: FlaskConical,
+  chat: MessageCircle,
+};
+
+export function AppTopNav() {
+  const pathname = usePathname();
+  const { username } = useWorkspace();
+  const { navBg } = useThemeCustomizer();
+
+  const navColor = navBg ? NAV_BG_COLORS[navBg] : undefined;
+  const navStyle = navColor ? { backgroundColor: navColor } : undefined;
+
+  return (
+    <TooltipProvider delay={150}>
+      <header
+        className={cn(
+          "sticky top-0 z-50 flex h-16 shrink-0 items-center gap-4 border-b border-border px-4 md:px-6",
+          !navColor ? "bg-white" : "",
+        )}
+        style={navStyle}
+      >
+        {/* Brand */}
+        <Link
+          href="/configure"
+          aria-label="larkup home"
+          className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-transform hover:scale-105"
+        >
+          <img src={"/logo9.png"} className="size-5" alt="logo" />
+        </Link>
+        <span className="font-semibold tracking-tight hidden sm:inline-block">
+          Larkup
+        </span>
+
+        {/* Pipeline rail */}
+        <nav className="flex flex-1 h-full items-end pb-0 gap-2 md:gap-4 ml-4">
+          {STAGES.map((stage, index) => {
+            const Icon = STAGE_ICONS[stage.id];
+            const active =
+              pathname === stage.href ||
+              (stage.href === "/configure" && pathname === "/");
+            const locked = stage.phase > CURRENT_PHASE;
+
+            const body = (
+              <div className="flex items-center ">
+                <span
+                  className={cn(
+                    "flex size-9 items-center justify-center rounded-lg transition-colors",
+                    active
+                      ? "text-primary"
+                      : locked
+                        ? "text-muted-foreground/50"
+                        : "text-muted-foreground group-hover:text-foreground",
+                  )}
+                >
+                  <Icon
+                    className="size-[18px]"
+                    strokeWidth={active ? 2.25 : 2}
+                  />
+                  {locked && (
+                    <span className="absolute -right-0.5 -top-0.5 flex size-3 items-center justify-center rounded-full bg-background">
+                      <Lock className="size-2 text-muted-foreground" />
+                    </span>
+                  )}
+                </span>
+                <span
+                  className={cn(
+                    "hidden md:block text-[13px] tracking-tight",
+                    active
+                      ? "font-semibold text-primary"
+                      : locked
+                        ? "text-muted-foreground/50"
+                        : "text-muted-foreground group-hover:text-foreground",
+                  )}
+                >
+                  {index + 1}. {stage.label}
+                </span>
+                {/* active accent bar (bottom) */}
+                <span
+                  className={cn(
+                    "absolute bottom-0 left-0 h-0.5 w-full bg-primary transition-opacity",
+                    active
+                      ? "opacity-100"
+                      : "opacity-0 group-hover:opacity-100",
+                  )}
+                />
+              </div>
+            );
+
+            return (
+              <Tooltip key={stage.id}>
+                <TooltipTrigger
+                  render={
+                    locked ? (
+                      <div
+                        aria-disabled
+                        className="group relative flex cursor-not-allowed items-center gap-2 h-10 px-3 rounded-md transition-colors"
+                      />
+                    ) : (
+                      <Link
+                        href={stage.href}
+                        aria-current={active ? "page" : undefined}
+                        className={cn(
+                          "group relative flex items-center gap-2 h-10 px-3 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          active ? "bg-muted/0" : "hover:bg-muted/30",
+                        )}
+                      />
+                    )
+                  }
+                >
+                  {body}
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  sideOffset={10}
+                  className="max-w-56"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-medium">
+                      {index + 1}. {stage.label}
+                      {locked && (
+                        <span className="ml-1.5 font-mono text-[10px] opacity-70">
+                          Phase {stage.phase}
+                        </span>
+                      )}
+                    </span>
+                    <span className="text-[11px] leading-snug opacity-80">
+                      {locked
+                        ? `Unlocks in Phase ${stage.phase}.`
+                        : stage.description}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </nav>
+
+        {/* Right side: Workspace & Theme Customizer */}
+        <div className="flex items-center gap-3">
+          <ServerSwitcher />
+          {username && (
+            <span className="hidden text-sm text-muted-foreground md:block">
+              Hi,{" "}
+              <span className="font-medium text-foreground">{username}</span>
+            </span>
+          )}
+          <ThemeSwitcher floating={false} />{" "}
+        </div>
+      </header>
+    </TooltipProvider>
+  );
+}

package/archive/redesign-v2/components/global-settings.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import useSWR from "swr";
+import { Loader2, Save, ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { RagConfig } from "@larkup/core/types";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+
+const fetcher = (url: string) =>
+  fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
+
+export function GlobalSettings({ onBack }: { onBack: () => void }) {
+  const { data, isLoading, mutate } = useSWR("/api/config", fetcher);
+  const [form, setForm] = useState<Partial<RagConfig>>({});
+  const [saving, setSaving] = useState(false);
+
+  const searchParams = useSearchParams();
+  const highlightSerper = searchParams.get("settings") === "serper";
+  const router = useRouter();
+  const pathname = usePathname();
+  const { setMode } = useWorkspace();
+
+  useEffect(() => {
+    if (data?.config) {
+      setForm(data.config);
+    }
+  }, [data]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...data?.config, ...form }),
+      });
+      const json = await res.json();
+      if (!res.ok)
+        throw new Error(json.error ?? "Failed to save configuration");
+
+      await mutate(json, { revalidate: false });
+      toast.success("Global Settings saved");
+
+      if (highlightSerper) {
+        // Remove the query param if it was set
+        const params = new URLSearchParams(searchParams);
+        params.delete("settings");
+        router.replace(`${pathname}?${params.toString()}`);
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-40">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-0 h-full">
+      <div className="border-b px-4 py-3 font-semibold flex items-center gap-2 shrink-0 bg-muted/30">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 shrink-0"
+          onClick={onBack}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <span className="flex-1 truncate">Global Settings</span>
+        <Button
+          size="sm"
+          onClick={handleSave}
+          disabled={saving}
+          className="h-7 px-3 text-xs"
+        >
+          {saving ? (
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          ) : (
+            <Save className="h-3 w-3 mr-1" />
+          )}
+          Save
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0 p-4 space-y-6 overflow-y-auto ">
+        <div className="space-y-4">
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Embedding
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Provider</Label>
+              <Select
+                value={form.embeddingProvider || ""}
+                onValueChange={(v) =>
+                  setForm({ ...form, embeddingProvider: v === null ? undefined : v })
+                }
+              >
+                <SelectTrigger className="h-8! text-sm w-full">
+                  <span>{form.embeddingProvider || "Select provider"}</span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openai">OpenAI</SelectItem>
+                  <SelectItem value="google">Google</SelectItem>
+                  <SelectItem value="cohere">Cohere</SelectItem>
+                  <SelectItem value="mistral">Mistral</SelectItem>
+                  <SelectItem value="deepseek">DeepSeek</SelectItem>
+                  <SelectItem value="vercel_ai_gateway">
+                    Vercel AI Gateway
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">API Key</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.embeddingApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, embeddingApiKey: e.target.value })
+                }
+                placeholder="sk-..."
+              />
+            </div>
+          </div>
+
+          <div className="  text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Chat (LLM)
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Provider</Label>
+              <Select
+                value={form.chatProvider || form.embeddingProvider || ""}
+                onValueChange={(v) =>
+                  setForm({ ...form, chatProvider: v === null ? undefined : v })
+                }
+              >
+                <SelectTrigger className="h-8! w-full text-sm">
+                  <span>
+                    {form.chatProvider ||
+                      form.embeddingProvider ||
+                      "Select provider"}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openai">OpenAI</SelectItem>
+                  <SelectItem value="google">Google</SelectItem>
+                  <SelectItem value="cohere">Cohere</SelectItem>
+                  <SelectItem value="mistral">Mistral</SelectItem>
+                  <SelectItem value="deepseek">DeepSeek</SelectItem>
+                  <SelectItem value="vercel_ai_gateway">
+                    Vercel AI Gateway
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">API Key</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.chatApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, chatApiKey: e.target.value })
+                }
+                placeholder="Leave blank to use Embedding Key"
+              />
+            </div>
+          </div>
+
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Web Search
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Serper.dev API Key</Label>
+              <Input
+                type="password"
+                className={`h-8 text-sm ${highlightSerper && !form.serperApiKey ? "border-red-500 focus-visible:ring-red-500" : ""}`}
+                value={form.serperApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, serperApiKey: e.target.value })
+                }
+                placeholder="Serper API Key"
+              />
+              {highlightSerper && !form.serperApiKey && (
+                <p className="text-[10px] text-red-500">
+                  API Key is required for web search.
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Scraper
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Server</Label>
+              <Input
+                className="h-8 text-sm"
+                value={form.scraperProxyServer || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyServer: e.target.value })
+                }
+                placeholder="http://proxy.example.com:8080"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Username</Label>
+              <Input
+                className="h-8 text-sm"
+                value={form.scraperProxyUsername || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyUsername: e.target.value })
+                }
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Password</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.scraperProxyPassword || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyPassword: e.target.value })
+                }
+              />
+            </div>
+            <div className="space-y-1.5 pt-2">
+              <Label className="text-xs">Firecrawl API Key (Cloud)</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.firecrawlApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, firecrawlApiKey: e.target.value })
+                }
+                placeholder="fc-..."
+              />
+            </div>
+          </div>
+
+          <div className="bg-card text-card-foreground p-3 space-y-3 rounded-lg border">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Workspace Mode
+            </h4>
+            <p className="text-xs text-muted-foreground">
+              Switch to simple mode for a streamlined experience without
+              pipeline configuration.
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full text-xs"
+              onClick={async () => {
+                await setMode("simple");
+                router.push("/simple/chat");
+              }}
+            >
+              Switch to Simple Mode
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}