larkup 0.1.29 → 0.1.31

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

@@ -0,0 +1,171 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  MessageCircle,
+  FileStack,
+  SlidersHorizontal,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  useThemeCustomizer,
+  type PanelBgVariant,
+} from "@/components/theme-customizer-provider";
+import { ThemeSwitcher } from "@/components/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",
+};
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  description: string;
+}
+
+const SIMPLE_NAV: NavItem[] = [
+  {
+    id: "chat",
+    label: "Chat",
+    href: "/simple/chat",
+    icon: MessageCircle,
+    description: "Chat with your knowledge base using AI.",
+  },
+  {
+    id: "docs",
+    label: "Docs",
+    href: "/simple/docs",
+    icon: FileStack,
+    description: "Upload, paste, or manage your documents.",
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "/simple/settings",
+    icon: SlidersHorizontal,
+    description: "Configure provider, API keys, and advanced settings.",
+  },
+];
+
+export function SimpleSidebar() {
+  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="/simple/chat"
+                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"
+              />
+            }
+          >
+            <img src={"/logo9.png"} className="size-6.5" alt="logo" />
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={10}>
+            Larkup
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Navigation */}
+        <nav className="flex flex-1 flex-col items-center gap-2.5">
+          {SIMPLE_NAV.map((item) => {
+            const Icon = item.icon;
+            const active = pathname?.startsWith(item.href);
+
+            return (
+              <Tooltip key={item.id}>
+                <TooltipTrigger
+                  render={
+                    <Link
+                      href={item.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"
+                    />
+                  }
+                >
+                  {/* Active accent bar */}
+                  <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"
+                        : "text-foreground/70 group-hover:bg-white/90 group-hover:text-foreground",
+                    )}
+                  >
+                    <Icon
+                      className="size-[19px]"
+                      strokeWidth={active ? 2.25 : 2}
+                    />
+                  </span>
+                  <span
+                    className={cn(
+                      "text-[10px] leading-none tracking-tight",
+                      active
+                        ? "font-semibold text-primary"
+                        : "text-muted-foreground",
+                    )}
+                  >
+                    {item.label}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="right"
+                  sideOffset={10}
+                  className="max-w-56"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-medium">{item.label}</span>
+                    <span className="text-[11px] leading-snug opacity-80">
+                      {item.description}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </nav>
+
+        {/* Footer */}
+        <ThemeSwitcher floating={false} />
+      </aside>
+    </TooltipProvider>
+  );
+}

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

@@ -0,0 +1,175 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { useThemeCustomizer, type PanelBgVariant } from "@/components/theme-customizer-provider";
+import { MessageCircle, FileStack, SlidersHorizontal, type LucideIcon } from "lucide-react";
+
+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",
+};
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  description: string;
+}
+
+const SIMPLE_NAV: NavItem[] = [
+  {
+    id: "chat",
+    label: "Chat",
+    href: "/simple/chat",
+    icon: MessageCircle,
+    description: "Chat with your knowledge base using AI.",
+  },
+  {
+    id: "docs",
+    label: "Docs",
+    href: "/simple/docs",
+    icon: FileStack,
+    description: "Upload, paste, or manage your documents.",
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    href: "/simple/settings",
+    icon: SlidersHorizontal,
+    description: "Configure provider, API keys, and advanced settings.",
+  },
+];
+
+export function SimpleTopNav() {
+  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="/simple/chat"
+          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>
+
+        {/* Navigation */}
+        <nav className="flex flex-1 h-full items-end pb-0 gap-2 md:gap-4 ml-4">
+          {SIMPLE_NAV.map((item, index) => {
+            const Icon = item.icon;
+            const active = pathname?.startsWith(item.href);
+
+            return (
+              <Tooltip key={item.id}>
+                <TooltipTrigger
+                  render={
+                    <Link
+                      href={item.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",
+                      )}
+                    />
+                  }
+                >
+                  <div className="flex items-center">
+                    <span
+                      className={cn(
+                        "flex size-9 items-center justify-center rounded-lg transition-colors",
+                        active
+                          ? "text-primary"
+                          : "text-muted-foreground group-hover:text-foreground",
+                      )}
+                    >
+                      <Icon
+                        className="size-[18px]"
+                        strokeWidth={active ? 2.25 : 2}
+                      />
+                    </span>
+                    <span
+                      className={cn(
+                        "hidden md:block text-[13px] tracking-tight",
+                        active
+                          ? "font-semibold text-primary"
+                          : "text-muted-foreground group-hover:text-foreground",
+                      )}
+                    >
+                      {item.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>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  sideOffset={10}
+                  className="max-w-56"
+                >
+                  <div className="flex flex-col gap-0.5">
+                    <span className="font-medium">
+                      {item.label}
+                    </span>
+                    <span className="text-[11px] leading-snug opacity-80">
+                      {item.description}
+                    </span>
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </nav>
+
+        {/* Right side: Workspace & Theme Customizer */}
+        <div className="flex items-center gap-3">
+          {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/analytics/analytics-dashboard.tsx

@@ -74,7 +74,7 @@ function formatCost(cost: number): string {
 }
 
 export function AnalyticsDashboard() {
-  const [activeTab, setActiveTab] = useState('overview');
+  const [activeTab, setActiveTab] = useState('indexing');
   const [timeframe, setTimeframe] = useState('14d');
 
   const {

package/components/data/firecrawl-notice.tsx

@@ -1,21 +1,12 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import useSWR from "swr";
-import {
-  CheckCircle2,
-  KeyRound,
-  Loader2,
-  Play,
-  Server,
-  Square,
-  TriangleAlert,
-} from "lucide-react";
-import { toast } from "sonner";
-import { formatErrorMessage } from "@/lib/error-formatter";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
+import { Loader2, Play, Square } from 'lucide-react';
+import { toast } from 'sonner';
+import { formatErrorMessage } from '@/lib/error-formatter';
+import { Button } from '@/components/ui/button';
 
 interface LocalState {
   running: boolean;
@@ -33,7 +24,7 @@ interface DockerState {
 interface LocalResponse {
   state: LocalState;
   docker: DockerState;
-  runtimeEnv?: "web" | "desktop" | "docker";
+  runtimeEnv?: 'web' | 'desktop' | 'docker';
 }
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json());
@@ -57,19 +48,15 @@ export function FirecrawlNotice({
   onChange?: () => void;
   onErrorChange?: (hasError: boolean) => void;
 }) {
-  const { data, mutate, isLoading } = useSWR<LocalResponse>(
-    "/api/firecrawl/local",
-    fetcher,
-    {
-      refreshInterval: (d) =>
-        d?.state.running || d?.state.startedAt ? 8000 : 0,
-    },
-  );
-  const [busy, setBusy] = useState<"start" | "stop" | null>(null);
+  const router = useRouter();
+  const { data, mutate, isLoading } = useSWR<LocalResponse>('/api/firecrawl/local', fetcher, {
+    refreshInterval: (d) => (d?.state.running || d?.state.startedAt ? 8000 : 0),
+  });
+  const [busy, setBusy] = useState<'start' | 'stop' | null>(null);
 
   const state = data?.state;
   const docker = data?.docker;
-  const runtimeEnv = data?.runtimeEnv ?? "web";
+  const runtimeEnv = data?.runtimeEnv ?? 'web';
   const running = state?.running ?? false;
   const dockerReady = docker?.compose ?? false;
   const hasError = !cloudConfigured && (!dockerReady || !!state?.lastError);
@@ -80,49 +67,45 @@ export function FirecrawlNotice({
     }
   }, [hasError, isLoading, onErrorChange]);
 
-  async function control(action: "start" | "stop") {
+  async function control(action: 'start' | 'stop') {
     setBusy(action);
-    if (action === "start") {
+    if (action === 'start') {
       toast.info(
-        runtimeEnv === "docker"
-          ? "Connecting to crawler service…"
-          : "Launching web crawler…",
+        runtimeEnv === 'docker' ? 'Connecting to crawler service…' : 'Launching web crawler…',
         {
           description:
-            runtimeEnv === "docker"
-              ? "Checking if the crawler service is available on the network."
-              : "Pulling images and starting containers. This can take a minute on first run.",
+            runtimeEnv === 'docker'
+              ? 'Checking if the crawler service is available on the network.'
+              : 'Pulling images and starting containers. This can take a minute on first run.',
         },
       );
     }
     try {
-      const res = await fetch("/api/firecrawl/local", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const res = await fetch('/api/firecrawl/local', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ action }),
       });
       const json = (await res.json()) as { state?: LocalState; error?: string };
-      if (!res.ok) throw new Error(json.error || "Request failed");
+      if (!res.ok) throw new Error(json.error || 'Request failed');
 
-      if (action === "start") {
+      if (action === 'start') {
         if (json.state?.running) {
-          toast.success("Web crawler is running", {
-            description: "Web scraping is now active.",
+          toast.success('Web crawler is running', {
+            description: 'Web scraping is now active.',
           });
         } else {
-          toast.warning("Crawler started", {
-            description:
-              json.state?.lastError ??
-              "Waiting for the service to become healthy.",
+          toast.warning('Web crawler is starting', {
+            description: 'It may take a moment to become available. Try again shortly.',
           });
         }
       } else {
-        toast.success("Web crawler stopped");
+        toast.success('Web crawler stopped');
       }
       await mutate();
       onChange?.();
     } catch (err) {
-      toast.error("Could not control web crawler", {
+      toast.error('Could not connect to the web crawler', {
         description: formatErrorMessage(err),
       });
     } finally {
@@ -130,31 +113,16 @@ export function FirecrawlNotice({
     }
   }
 
-  // Both cloud and local options are kept available.
-
-  // Description text based on environment
-  const idleDescription = (() => {
-    if (runtimeEnv === "docker") {
-      return dockerReady
-        ? "A crawler service was found on the network. Click to connect."
-        : "Start your deployment with the crawler profile to enable web scraping: docker compose --profile crawler up";
-    }
-    if (cloudConfigured) {
-      return "You have a cloud key set. You can also run the crawler locally via Docker.";
-    }
-    return "Launch a self-hosted web crawler via Docker. A key is generated automatically — no signup required. Pasting and uploading work without it.";
-  })();
-
   return (
     <div className="flex items-center gap-2">
       {running ? (
         <Button
           variant="outline"
           className="h-10 gap-1.5 rounded-md bg-red-500 hover:bg-red-600 text-white hover:text-white hover:border-red-200 text-sm px-4 shadow-none"
-          onClick={() => control("stop")}
+          onClick={() => control('stop')}
           disabled={busy !== null}
         >
-          {busy === "stop" ? (
+          {busy === 'stop' ? (
             <Loader2 className="size-3 animate-spin" />
           ) : (
             <Square className="size-3" />
@@ -164,45 +132,20 @@ export function FirecrawlNotice({
       ) : (
         <Button
           variant="outline"
-          onClick={() => control("start")}
-          disabled={
-            busy !== null ||
-            isLoading ||
-            (!dockerReady && runtimeEnv !== "docker")
-          }
+          onClick={() => {
+            control('start');
+          }}
+          disabled={busy !== null || isLoading}
           className="h-10 gap-1.5 rounded-md text-sm px-4 shadow-none bg-orange-500 text-white hover:bg-orange-600 hover:text-white"
         >
-          {busy === "start" ? (
+          {busy === 'start' ? (
             <Loader2 className="size-3 animate-spin text-muted-foreground" />
           ) : (
-            <img
-              src="/icons/firecrawl2.png"
-              alt=""
-              className="size-3 object-contain"
-            />
+            <img src="/icons/firecrawl2.png" alt="" className="size-3 object-contain" />
           )}
-          {runtimeEnv === "docker" ? "Connect Crawler" : "Launch Crawler"}
+          {runtimeEnv === 'docker' && dockerReady ? 'Connect Crawler' : 'Launch Crawler'}
         </Button>
       )}
-
-      {state?.lastError && !running && (
-        <span
-          className="text-[10px] text-destructive flex items-center gap-1 max-w-[200px] truncate"
-          title={state.lastError}
-        >
-          <TriangleAlert className="size-3 shrink-0" />
-          <span className="truncate">Error starting crawler</span>
-        </span>
-      )}
-      {!isLoading && !dockerReady && !running && docker?.message && (
-        <span
-          className="text-[10px] text-destructive flex items-center gap-1 max-w-[200px] truncate"
-          title={docker.message}
-        >
-          <TriangleAlert className="size-3 shrink-0" />
-          <span className="truncate">Docker issue</span>
-        </span>
-      )}
     </div>
   );
 }

package/components/data/media-panel.tsx

@@ -1634,9 +1634,6 @@ function ActiveIndexingList({
                   {asset.processingMessage || 'Preparing media indexing...'}
                 </p>
               </div>
-              {asset.processingSteps?.length ? (
-                <PipelineSteps steps={asset.processingSteps} />
-              ) : null}
             </div>
           );
         })}

package/components/data/scrape-panel.tsx

@@ -36,6 +36,7 @@ import { GenericAlert } from '@/components/alerts/generic-alert';
 import { cn } from '@/lib/utils';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import useSWR from 'swr';
+import { useRouter } from 'next/navigation';
 import type { RagConfig } from '@larkup/core/types';
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
@@ -85,6 +86,7 @@ export function ScrapePanel({
   onStarted: () => void;
   crawlerControl?: React.ReactNode;
 }) {
+  const router = useRouter();
   const {
     query,
     setQuery,
@@ -124,6 +126,15 @@ export function ScrapePanel({
   const inputRef = useRef<HTMLInputElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  function showCrawlerSettings() {
+    toast.error('Web crawler is not available. Choose a crawler provider in Settings.', {
+      action: {
+        label: 'Open settings',
+        onClick: () => router.push('/settings?section=general#web-crawler'),
+      },
+    });
+  }
+
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (
@@ -222,7 +233,12 @@ export function ScrapePanel({
         fetchProviderTotalCount(q, activeProvider);
       }
     } catch (err) {
-      toast.error(formatErrorMessage(err));
+      const message = formatErrorMessage(err);
+      if (/crawler|firecrawl|not running|api key/i.test(message)) {
+        showCrawlerSettings();
+      } else {
+        toast.error(message);
+      }
     }
   }