add banner for docling serve

frontend/components/docling-health-banner.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { AlertTriangle, ExternalLink, Copy } from "lucide-react";
+import { useDoclingHealthQuery } from "@/src/app/api/queries/useDoclingHealthQuery";
+import { Banner, BannerIcon, BannerTitle, BannerAction } from "@/components/ui/banner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface DoclingHealthBannerProps {
+  className?: string;
+}
+
+// DoclingSetupDialog component
+interface DoclingSetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+}
+
+function DoclingSetupDialog({
+  open,
+  onOpenChange,
+  className
+}: DoclingSetupDialogProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText("uv run openrag");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+            docling-serve is stopped. Knowledge ingest is unavailable.
+          </DialogTitle>
+          <DialogDescription>
+            Start docling-serve by running:
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <code className="flex-1 bg-muted px-3 py-2.5 rounded-md text-sm font-mono">
+              uv run openrag
+            </code>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleCopy}
+              className="shrink-0"
+              title={copied ? "Copied!" : "Copy to clipboard"}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <DialogDescription>
+            Then, select <span className="font-semibold text-foreground">Start Native Services</span> in the TUI. Once docling-serve is running, refresh OpenRAG.
+          </DialogDescription>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="default"
+            onClick={() => onOpenChange(false)}
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function DoclingHealthBanner({ className }: DoclingHealthBannerProps) {
+  const { data: health, isLoading, isError } = useDoclingHealthQuery();
+  const [showDialog, setShowDialog] = useState(false);
+
+  const isHealthy = health?.status === "healthy" && !isError;
+  const isUnhealthy = health?.status === "unhealthy" || isError;
+
+  // Only show banner when service is unhealthy
+  if (isLoading || isHealthy) {
+    return null;
+  }
+
+  if (isUnhealthy) {
+    return (
+      <>
+        <Banner
+          className={cn(
+            "bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-200 border-amber-200 dark:border-amber-800",
+            className
+          )}
+        >
+          <BannerIcon
+            icon={AlertTriangle}
+          />
+          <BannerTitle className="font-medium">
+            docling-serve native service is stopped. Knowledge ingest is unavailable.
+          </BannerTitle>
+          <BannerAction
+            onClick={() => setShowDialog(true)}
+            className="bg-foreground text-background hover:bg-primary/90"
+          >
+            Setup Docling Serve
+            <ExternalLink className="h-3 w-3 ml-1" />
+          </BannerAction>
+        </Banner>
+
+        <DoclingSetupDialog
+          open={showDialog}
+          onOpenChange={setShowDialog}
+        />
+      </>
+    );
+  }
+
+  return null;
+}

frontend/components/ui/banner.tsx

@@ -0,0 +1,141 @@
+'use client';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { type LucideIcon, XIcon } from 'lucide-react';
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  type MouseEventHandler,
+  useContext,
+} from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type BannerContextProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+};
+
+export const BannerContext = createContext<BannerContextProps>({
+  show: true,
+  setShow: () => {},
+});
+
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onClose?: () => void;
+  inset?: boolean;
+};
+
+export const Banner = ({
+  children,
+  visible,
+  defaultVisible = true,
+  onClose,
+  className,
+  inset = false,
+  ...props
+}: BannerProps) => {
+  const [show, setShow] = useControllableState({
+    defaultProp: defaultVisible,
+    prop: visible,
+    onChange: onClose,
+  });
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <BannerContext.Provider value={{ show, setShow }}>
+      <div
+        className={cn(
+          'flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground',
+          inset && 'rounded-lg',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </BannerContext.Provider>
+  );
+};
+
+export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+};
+
+export const BannerIcon = ({
+  icon: Icon,
+  className,
+  ...props
+}: BannerIconProps) => (
+  <div
+    className={cn(
+      'p-1',
+      className
+    )}
+    {...props}
+  >
+    <Icon size={16} />
+  </div>
+);
+
+export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (
+  <p className={cn('flex-1 text-sm', className)} {...props} />
+);
+
+export type BannerActionProps = ComponentProps<typeof Button>;
+
+export const BannerAction = ({
+  variant = 'outline',
+  size = 'sm',
+  className,
+  ...props
+}: BannerActionProps) => (
+  <Button
+    className={cn(
+      'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',
+      className
+    )}
+    size={size}
+    variant={variant}
+    {...props}
+  />
+);
+
+export type BannerCloseProps = ComponentProps<typeof Button>;
+
+export const BannerClose = ({
+  variant = 'ghost',
+  size = 'icon',
+  onClick,
+  className,
+  ...props
+}: BannerCloseProps) => {
+  const { setShow } = useContext(BannerContext);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    setShow(false);
+    onClick?.(e);
+  };
+
+  return (
+    <Button
+      className={cn(
+        'shrink-0 bg-transparent hover:bg-background/10 hover:text-background',
+        className
+      )}
+      onClick={handleClick}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <XIcon size={18} />
+    </Button>
+  );
+};

frontend/src/app/api/queries/useDoclingHealthQuery.ts

@@ -0,0 +1,55 @@
+import {
+  type UseQueryOptions,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+
+export interface DoclingHealthResponse {
+  status: "healthy" | "unhealthy";
+  message?: string;
+}
+
+export const useDoclingHealthQuery = (
+  options?: Omit<UseQueryOptions<DoclingHealthResponse>, "queryKey" | "queryFn">,
+) => {
+  const queryClient = useQueryClient();
+
+  async function checkDoclingHealth(): Promise<DoclingHealthResponse> {
+    try {
+      const response = await fetch("http://127.0.0.1:5001/health", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (response.ok) {
+        return { status: "healthy" };
+      } else {
+        return {
+          status: "unhealthy",
+          message: `Health check failed with status: ${response.status}`,
+        };
+      }
+    } catch (error) {
+      return {
+        status: "unhealthy",
+        message: error instanceof Error ? error.message : "Connection failed",
+      };
+    }
+  }
+
+  const queryResult = useQuery(
+    {
+      queryKey: ["docling-health"],
+      queryFn: checkDoclingHealth,
+      retry: 1,
+      refetchInterval: 30000, // Check every 30 seconds
+      staleTime: 25000, // Consider data stale after 25 seconds
+      ...options,
+    },
+    queryClient,
+  );
+
+  return queryResult;
+};

frontend/src/app/chat/page.tsx

@@ -22,6 +22,7 @@ import { Button } from "@/components/ui/button";
 import { useAuth } from "@/contexts/auth-context";
 import { type EndpointType, useChat } from "@/contexts/chat-context";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
@@ -140,6 +141,7 @@ function ChatPage() {
   const streamIdRef = useRef(0);
   const lastLoadedConversationRef = useRef<string | null>(null);
   const { addTask, isMenuOpen } = useTask();
+  const { totalTopOffset } = useLayout();
   const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
     useKnowledgeFilter();
 
@@ -1891,7 +1893,7 @@ function ChatPage() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
           : isMenuOpen
@@ -1900,6 +1902,7 @@ function ChatPage() {
           ? "md:right-80" // Only KF panel open: 320px
           : "md:right-6" // Neither open: 24px
       }`}
+      style={{ top: `${totalTopOffset}px` }}
     >
       {/* Debug header - only show in debug mode */}
       {isDebugMode && (

frontend/src/app/knowledge/chunks/page.tsx

@@ -12,6 +12,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import {
   type ChunkResult,
@@ -33,6 +34,7 @@ function ChunksPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { isMenuOpen } = useTask();
+  const { totalTopOffset } = useLayout();
   const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
 
   const filename = searchParams.get("filename");
@@ -132,7 +134,7 @@ function ChunksPageContent() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-row transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 flex flex-row transition-all duration-300 ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -144,6 +146,7 @@ function ChunksPageContent() {
           : // Only KF panel open: 320px
             "md:right-6" // Neither open: 24px
       }`}
+      style={{ top: `${totalTopOffset}px` }}
     >
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         {/* Header */}

frontend/src/app/knowledge/page.tsx

@@ -11,6 +11,7 @@ import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useLayout } from "@/contexts/layout-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
 import "@/components/AgGrid/registerAgGridModules";
@@ -46,6 +47,7 @@ function getSourceIcon(connectorType?: string) {
 function SearchPage() {
   const router = useRouter();
   const { isMenuOpen, files: taskFiles } = useTask();
+  const { totalTopOffset } = useLayout();
   const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
     useKnowledgeFilter();
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
@@ -229,7 +231,7 @@ function SearchPage() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -241,6 +243,7 @@ function SearchPage() {
           : // Only KF panel open: 320px
             "md:right-6" // Neither open: 24px
       }`}
+      style={{ top: `${totalTopOffset}px` }}
     >
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         <div className="flex items-center justify-between mb-6">

frontend/src/components/layout-wrapper.tsx

@@ -16,6 +16,9 @@ import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 // import { GitHubStarButton } from "@/components/github-star-button"
 // import { DiscordLink } from "@/components/discord-link"
 import { useTask } from "@/contexts/task-context";
+import { DoclingHealthBanner } from "@/components/docling-health-banner";
+import { useDoclingHealthQuery } from "@/src/app/api/queries/useDoclingHealthQuery";
+import { LayoutProvider } from "@/contexts/layout-context";
 
 export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -31,6 +34,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   const { isLoading: isSettingsLoading, data: settings } = useGetSettingsQuery({
     enabled: isAuthenticated || isNoAuthMode,
   });
+  const { data: health, isLoading: isHealthLoading, isError } = useDoclingHealthQuery();
 
   // Only fetch conversations on chat page
   const isOnChatPage = pathname === "/" || pathname === "/chat";
@@ -56,6 +60,15 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
       task.status === "processing",
   );
 
+  const isUnhealthy = health?.status === "unhealthy" || isError;
+  const isBannerVisible = !isHealthLoading && isUnhealthy;
+
+  // Dynamic height calculations based on banner visibility
+  const headerHeight = 53;
+  const bannerHeight = 52; // Approximate banner height
+  const totalTopOffset = isBannerVisible ? headerHeight + bannerHeight : headerHeight;
+  const mainContentHeight = `calc(100vh - ${totalTopOffset}px)`;
+
   // Show loading state when backend isn't ready
   if (isLoading || isSettingsLoading) {
     return (
@@ -76,6 +89,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   // For all other pages, render with Langflow-styled navigation and task menu
   return (
     <div className="h-full relative">
+      <DoclingHealthBanner className="w-full px-6 pt-2" />
       <header className="header-arrangement bg-background sticky top-0 z-50">
         <div className="header-start-display px-4">
           {/* Logo/Title */}
@@ -118,7 +132,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </header>
-      <div className="side-bar-arrangement bg-background fixed left-0 top-[53px] bottom-0 md:flex hidden">
+      <div
+        className="side-bar-arrangement bg-background fixed left-0 bottom-0 md:flex hidden"
+        style={{ top: `${totalTopOffset}px` }}
+      >
         <Navigation
           conversations={conversations}
           isConversationsLoading={isConversationsLoading}
@@ -126,7 +143,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
         />
       </div>
       <main
-        className={`md:pl-72 transition-all duration-300 overflow-y-auto h-[calc(100vh-53px)] ${
+        className={`md:pl-72 transition-all duration-300 overflow-y-auto ${
           isMenuOpen && isPanelOpen
             ? "md:pr-[728px]"
             : // Both open: 384px (menu) + 320px (KF panel) + 24px (original padding)
@@ -138,8 +155,11 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
             : // Only KF panel open: 320px
               "md:pr-0" // Neither open: 24px
         }`}
+        style={{ height: mainContentHeight }}
       >
-        <div className="container py-6 lg:py-8 px-4 lg:px-6">{children}</div>
+        <LayoutProvider headerHeight={headerHeight} totalTopOffset={totalTopOffset}>
+          <div className="container py-6 lg:py-8 px-4 lg:px-6">{children}</div>
+        </LayoutProvider>
       </main>
       <TaskNotificationMenu />
       <KnowledgeFilterPanel />

frontend/src/contexts/layout-context.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+interface LayoutContextType {
+  headerHeight: number;
+  totalTopOffset: number;
+}
+
+const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
+
+export function useLayout() {
+  const context = useContext(LayoutContext);
+  if (context === undefined) {
+    throw new Error("useLayout must be used within a LayoutProvider");
+  }
+  return context;
+}
+
+export function LayoutProvider({
+  children,
+  headerHeight,
+  totalTopOffset
+}: {
+  children: React.ReactNode;
+  headerHeight: number;
+  totalTopOffset: number;
+}) {
+  return (
+    <LayoutContext.Provider value={{ headerHeight, totalTopOffset }}>
+      {children}
+    </LayoutContext.Provider>
+  );
+}

src/tui/managers/env_manager.py

@@ -32,7 +32,7 @@ class EnvConfig:
     langflow_superuser: str = "admin"
     langflow_superuser_password: str = ""
     langflow_chat_flow_id: str = "1098eea1-6649-4e1d-aed1-b77249fb8dd0"
-    langflow_ingest_flow_id: str = "5488df7c-b93f-4f87-a446-b67028bc0813"
+    langflow_ingest_flow_id: str = "1402618b-e6d1-4ff2-9a11-d6ce71186915"
 
     # OAuth settings
     google_oauth_client_id: str = ""