larkup 0.1.14

package/components/alerts/generic-alert.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+export interface GenericAlertProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  actionText?: React.ReactNode;
+  onAction?: () => void;
+  variant?: "default" | "destructive";
+  icon?: React.ReactNode;
+  contentClassName?: string;
+}
+
+export function GenericAlert({
+  open,
+  onOpenChange,
+  title,
+  description,
+  cancelText = "Cancel",
+  actionText = "Continue",
+  onAction,
+  variant = "default",
+  icon,
+  contentClassName,
+}: GenericAlertProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className={contentClassName}>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2">
+            {icon}
+            {title}
+          </AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription className={typeof description === "string" ? "whitespace-pre-wrap" : "space-y-2"}>
+              {description}
+            </AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault();
+              if (onAction) onAction();
+              onOpenChange(false);
+            }}
+            className={cn(
+              variant === "destructive" &&
+                "bg-destructive text-white hover:bg-destructive/90 gap-2"
+            )}
+          >
+            {actionText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/components/app-sidebar.tsx

@@ -0,0 +1,187 @@
+"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 { 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,
+  index: Layers,
+  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-1.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-7 w-1 -translate-y-1/2 rounded-r-full bg-primary transition-opacity",
+                    active ? "opacity-100" : "opacity-0",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "relative flex size-10 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-[10.5px] 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-1.5 rounded-2xl py-2"
+                      />
+                    ) : (
+                      <Link
+                        href={stage.href}
+                        aria-current={active ? "page" : undefined}
+                        className="group relative flex w-16 flex-col items-center gap-1.5 rounded-2xl py-2 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/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/components/chat/chat-settings-modal.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Settings, Eye, EyeOff } from "lucide-react";
+import { toast } from "sonner";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+import useSWR from "swr";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { PROVIDER_META, ProviderIcon } from "@/components/ui/provider-icon";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from "../ui/dialog";
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export function ChatSettingsModal() {
+  const [open, setOpen] = useState(false);
+  const { activeServer } = useWorkspace();
+  const serverId = activeServer?.id;
+
+  const { data: configData, mutate } = useSWR(
+    serverId ? `/api/config?serverId=${encodeURIComponent(serverId)}` : null,
+    fetcher,
+  );
+  
+  const config = configData?.config;
+
+  const [provider, setProvider] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [showApiKey, setShowApiKey] = useState(false);
+
+  useEffect(() => {
+    if (config && open) {
+      setProvider(config.chatProvider || config.embeddingProvider || "openai");
+      setApiKey(config.chatApiKey || "");
+      setSystemPrompt(config.systemPrompt || "");
+    }
+  }, [config, open]);
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    if (!serverId || !config) return;
+
+    setIsSaving(true);
+    try {
+      const res = await fetch(
+        `/api/config?serverId=${encodeURIComponent(serverId)}`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            ...config,
+            chatProvider: provider,
+            chatApiKey: apiKey,
+            systemPrompt: systemPrompt,
+          }),
+        },
+      );
+
+      if (!res.ok) throw new Error("Failed to save settings");
+
+      toast.success("Chat settings saved.");
+      mutate();
+      setOpen(false);
+    } catch (err: any) {
+      toast.error(err.message || "Error saving settings");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <button
+            type="button"
+            title="Chat Settings"
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-secondary hover:text-foreground"
+          >
+            <Settings className="h-4 w-4" />
+          </button>
+        }
+      />
+
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Chat Provider Settings</DialogTitle>
+          <DialogDescription>
+            Configure the AI provider and API key used for the Chat interface.
+            This can be different from your embedding provider.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSave} className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-foreground">
+              AI Provider
+            </label>
+            <Select
+              value={provider}
+              onValueChange={(v) => setProvider(v ?? "")}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select an AI Provider" />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(PROVIDER_META).map(([key, meta]) => (
+                  <SelectItem key={key} value={key}>
+                    <div className="flex items-center gap-2">
+                      <ProviderIcon
+                        src={meta.iconSrc}
+                        alt={meta.label}
+                        pillBg={meta.pillBg}
+                        size={18}
+                      />
+                      <span>{meta.label}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-foreground">
+              API Key
+            </label>
+            <div className="relative flex items-center">
+              <input
+                type={showApiKey ? "text" : "password"}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder="Leave blank to use environment variable"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 pr-10 text-sm text-foreground outline-none transition focus:border-primary focus:ring-1 focus:ring-primary"
+              />
+              <button
+                type="button"
+                onClick={() => setShowApiKey(!showApiKey)}
+                className="absolute right-3 text-muted-foreground hover:text-foreground"
+              >
+                {showApiKey ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              If left blank, it falls back to <code>AI_GATEWAY_API_KEY</code> or{" "}
+              <code>EMBEDDING_API_KEY</code> in your environment.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-foreground">
+              System Prompt
+            </label>
+            <textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="Leave blank to use default system prompt"
+              className="w-full min-h-[100px] rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary focus:ring-1 focus:ring-primary"
+            />
+            <p className="text-xs text-muted-foreground">
+              Override the default instructions given to the agent.
+            </p>
+          </div>
+
+          <DialogFooter className="mt-4">
+            <DialogClose
+              render={
+                <button
+                  type="button"
+                  className="rounded-lg px-4 py-2 text-sm font-medium text-muted-foreground transition hover:bg-secondary hover:text-foreground"
+                >
+                  Cancel
+                </button>
+              }
+            />
+
+            <button
+              type="submit"
+              disabled={isSaving}
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
+            >
+              {isSaving ? "Saving..." : "Save Settings"}
+            </button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}