feat: initial setup wizard (#1693)

Author: yottahmd

ui/src/App.tsx

@@ -9,7 +9,7 @@ import { ErrorModalProvider } from './components/ui/error-modal';
 import { ToastProvider } from './components/ui/simple-toast';
 import { AppBarContext } from './contexts/AppBarContext';
 import { AuthProvider } from './contexts/AuthContext';
-import { Config, ConfigContext } from './contexts/ConfigContext';
+import { Config, ConfigContext, ConfigUpdateContext } from './contexts/ConfigContext';
 import { PageContextProvider } from './contexts/PageContext';
 import { SchemaProvider } from './contexts/SchemaContext';
 import { SearchStateProvider } from './contexts/SearchStateContext';
@@ -92,7 +92,12 @@ function DeveloperElement({
   return <ProtectedRoute requiredRole="developer">{children}</ProtectedRoute>;
 }
 
-function AppInner({ config }: Props): React.ReactElement {
+function AppInner({ config: initialConfig }: Props): React.ReactElement {
+  const [config, setConfig] = React.useState(initialConfig);
+  const updateConfig = React.useCallback((patch: Partial<Config>) => {
+    setConfig((prev) => ({ ...prev, ...patch }));
+  }, []);
+
   const [title, setTitle] = React.useState<string>('');
   const { preferences } = useUserPreferences();
   const theme = preferences.theme || 'dark';
@@ -144,7 +149,8 @@ function AppInner({ config }: Props): React.ReactElement {
           }}
         >
           <ConfigContext.Provider value={config}>
-            <AuthProvider>
+            <ConfigUpdateContext.Provider value={updateConfig}>
+              <AuthProvider>
               <SearchStateProvider>
                 <SchemaProvider>
                   <ErrorModalProvider>
@@ -197,7 +203,8 @@ function AppInner({ config }: Props): React.ReactElement {
                   </ErrorModalProvider>
                 </SchemaProvider>
               </SearchStateProvider>
-            </AuthProvider>
+              </AuthProvider>
+            </ConfigUpdateContext.Provider>
           </ConfigContext.Provider>
         </AppBarContext.Provider>
       </SWRConfig>

ui/src/contexts/ConfigContext.tsx

@@ -45,6 +45,8 @@ export type Config = {
 
 export const ConfigContext = createContext<Config>(null!);
 
+export const ConfigUpdateContext = createContext<(patch: Partial<Config>) => void>(() => {});
+
 /**
  * Access the application configuration from the nearest ConfigContext provider.
  *
@@ -53,3 +55,7 @@ export const ConfigContext = createContext<Config>(null!);
 export function useConfig(): Config {
   return useContext(ConfigContext);
 }
+
+export function useUpdateConfig(): (patch: Partial<Config>) => void {
+  return useContext(ConfigUpdateContext);
+}

ui/src/features/agent/components/AgentChatModal.tsx

@@ -37,7 +37,7 @@ function findLatestSession(
 }
 
 export function AgentChatModal(): ReactElement | null {
-  const { isOpen, isClosing, closeChat } = useAgentChatContext();
+  const { isOpen, isClosing, closeChat, initialInputValue, setInitialInputValue } = useAgentChatContext();
   const isMobile = useIsMobile();
   const {
     sessionId,
@@ -116,10 +116,11 @@ export function AgentChatModal(): ReactElement | null {
 
   const handleSend = useCallback(
     (message: string, dagContexts?: DAGContext[], model?: string): void => {
+      setInitialInputValue(null);
       // sendMessage handles its own error reporting via setError internally
       sendMessage(message, model, dagContexts).catch(() => {});
     },
-    [sendMessage]
+    [sendMessage, setInitialInputValue]
   );
 
   const handleCancel = useCallback((): void => {
@@ -208,6 +209,7 @@ export function AgentChatModal(): ReactElement | null {
             onCancel={handleCancel}
             isWorking={isWorking}
             placeholder="Ask me to create a DAG, run a command..."
+            initialValue={initialInputValue}
           />
         </div>
       </div>

ui/src/features/agent/components/ChatInput.tsx

@@ -27,6 +27,7 @@ interface ChatInputProps {
   isWorking: boolean;
   disabled?: boolean;
   placeholder?: string;
+  initialValue?: string | null;
 }
 
 export function ChatInput({
@@ -35,6 +36,7 @@ export function ChatInput({
   isWorking,
   disabled,
   placeholder = 'Type a message...',
+  initialValue,
 }: ChatInputProps) {
   const client = useClient();
   const appBarContext = useContext(AppBarContext);
@@ -88,6 +90,20 @@ export function ChatInput({
     return () => controller.abort();
   }, [client, appBarContext.selectedRemoteNode]);
 
+  // Pre-fill textarea with initial value (e.g., from setup wizard)
+  useEffect(() => {
+    if (initialValue) {
+      setMessage(initialValue);
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (el) {
+          el.style.height = 'auto';
+          el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+        }
+      });
+    }
+  }, [initialValue]);
+
   // Reset pending state when server confirms processing or after timeout fallback
   useEffect(() => {
     if (isWorking) {

ui/src/features/agent/context/AgentChatContext.tsx

@@ -35,6 +35,8 @@ interface AgentChatContextType {
   addMessage: (message: Message) => void;
   setPendingUserMessage: (message: string | null) => void;
   clearSession: () => void;
+  initialInputValue: string | null;
+  setInitialInputValue: (value: string | null) => void;
 }
 
 interface AgentChatProviderProps {
@@ -58,6 +60,7 @@ export function AgentChatProvider({ children }: AgentChatProviderProps): ReactNo
   const [sessions, setSessions] = useState<SessionWithState[]>([]);
   const [hasMoreSessions, setHasMoreSessions] = useState(true);
   const [sessionPage, setSessionPage] = useState(1);
+  const [initialInputValue, setInitialInputValue] = useState<string | null>(null);
 
   const appendSessions = useCallback((newSessions: SessionWithState[]) => {
     setSessions(prev => [...prev, ...newSessions]);
@@ -140,13 +143,16 @@ export function AgentChatProvider({ children }: AgentChatProviderProps): ReactNo
     addMessage,
     setPendingUserMessage,
     clearSession,
+    initialInputValue,
+    setInitialInputValue,
   }), [
     isOpen, isClosing, sessionId, messages, pendingUserMessage,
     sessionState, sessions, hasMoreSessions, sessionPage,
     openChat, closeChat, toggleChat,
     setSessionId, setMessages, setSessionState, setSessions,
     appendSessions, setHasMoreSessions, setSessionPage,
     addMessage, setPendingUserMessage, clearSession,
+    initialInputValue,
   ]);
 
   return (

ui/src/layouts/Layout.tsx

@@ -5,6 +5,7 @@ import { getResponsiveTitleClass } from '@/lib/text-utils';
 import { Menu, Terminal, X } from 'lucide-react';
 import { useAgentChatContext } from '@/features/agent';
 import * as React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { mainListItems as MainListItems } from '../menu';
 
 /**
@@ -77,7 +78,19 @@ type LayoutProps = {
  */
 function Content({ navbarColor, children }: LayoutProps) {
   const config = useConfig();
-  const { toggleChat } = useAgentChatContext();
+  const { toggleChat, openChat, setInitialInputValue } = useAgentChatContext();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Auto-open agent modal when redirected from setup with openAgent state
+  React.useEffect(() => {
+    if ((location.state as { openAgent?: boolean })?.openAgent) {
+      setInitialInputValue('Create a simple DAG that prints Hello World every minute');
+      openChat();
+      navigate(location.pathname, { replace: true, state: {} });
+    }
+  }, [location.state, location.pathname, openChat, setInitialInputValue, navigate]);
+
   const hasCustomColor: boolean = Boolean(
     navbarColor && navbarColor.trim() !== ''
   );