diff --git a/README.md b/README.md
index 038932e0..87f9cc84 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@
 
 This project contains the Agentuity documentation website, created using Fumadocs and running on NextJS 15.
 
+
 To make the search feature work, you must set up `.env.local` with the following steps.
 
 ## Quick Start Guide
diff --git a/app/(docs)/[[...slug]]/page.tsx b/app/(docs)/[[...slug]]/page.tsx
index 1e04170f..16e4b763 100644
--- a/app/(docs)/[[...slug]]/page.tsx
+++ b/app/(docs)/[[...slug]]/page.tsx
@@ -19,6 +19,8 @@ import { source } from '@/lib/source';
 import { CommunityButton } from '../../../components/Community';
 import CopyPageDropdown from '../../../components/CopyPageDropdown';
 import { NavButton } from '../../../components/NavButton';
+import CodeFromFiles from '../../../components/CodeFromFiles';
+
 
 export default async function Page(props: {
 	params: Promise<{ slug?: string[] }>;
@@ -56,6 +58,7 @@ export default async function Page(props: {
 						PopupContent,
 						PopupTrigger,
 						CodeExample,
+						CodeFromFiles,
 						CLICommand,
 						CommunityButton,
 						Mermaid,
diff --git a/app/api/rag-search/route.ts b/app/api/rag-search/route.ts
index 665a892f..1e8c40ed 100644
--- a/app/api/rag-search/route.ts
+++ b/app/api/rag-search/route.ts
@@ -1,5 +1,5 @@
 import type { NextRequest } from 'next/server';
-import { getAgentConfig } from '@/lib/env';
+import { getAgentQaConfig } from '@/lib/env';
 import { source } from '@/lib/source';
 
 function documentPathToUrl(docPath: string): string {
@@ -93,7 +93,7 @@ export async function GET(request: NextRequest) {
 	}
 
 	try {
-		const agentConfig = getAgentConfig();
+		const agentConfig = getAgentQaConfig();
 
 		// Prepare headers
 		const headers: Record<string, string> = {
diff --git a/app/api/sessions/[sessionId]/messages/route.ts b/app/api/sessions/[sessionId]/messages/route.ts
new file mode 100644
index 00000000..523b43d1
--- /dev/null
+++ b/app/api/sessions/[sessionId]/messages/route.ts
@@ -0,0 +1,374 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getKVValue, setKVValue } from "@/lib/kv-store";
+import {
+  Session,
+  Message,
+  StreamingChunk,
+  TutorialData,
+} from "@/app/chat/types";
+import { toISOString, getCurrentTimestamp } from "@/app/chat/utils/dateUtils";
+import { getAgentPulseConfig } from "@/lib/env";
+import { config } from "@/lib/config";
+import { parseAndValidateJSON, SessionMessageRequestSchema } from "@/lib/validation/middleware";
+
+// Constants
+const DEFAULT_CONVERSATION_HISTORY_LIMIT = 10;
+const AGENT_REQUEST_TIMEOUT = 30000; // 30 seconds
+
+
+function sanitizeTitle(input: string): string {
+  if (!input) return '';
+  let s = input.trim();
+  // Strip wrapping quotes/backticks
+  if ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith('\'') && s.endsWith('\'')) || (s.startsWith('`') && s.endsWith('`'))) {
+    s = s.slice(1, -1).trim();
+  }
+  // Remove markdown emphasis
+  s = s.replace(/\*\*([^*]+)\*\*|\*([^*]+)\*|__([^_]+)__|_([^_]+)_/g, (_m, a, b, c, d) => a || b || c || d || '');
+  // Remove emojis (basic unicode emoji ranges)
+  s = s.replace(/[\u{1F300}-\u{1FAFF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '');
+  // Collapse whitespace
+  s = s.replace(/\s+/g, ' ').trim();
+  // Sentence case
+  s = sentenceCase(s);
+  // Trim trailing punctuation noise
+  s = s.replace(/[\s\-–—:;,\.]+$/g, '').trim();
+  // Enforce 60 chars
+  if (s.length > 60) s = s.slice(0, 60).trim();
+  return s;
+}
+
+function sentenceCase(str: string): string {
+  if (!str) return '';
+  const lower = str.toLowerCase();
+  return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
+
+/**
+ * POST /api/sessions/[sessionId]/messages - Add a message to a session and process with streaming
+ *
+ * This endpoint now handles:
+ * 1. Adding a user message to a session
+ * 2. Processing the message with the agent
+ * 3. Streaming the response back to the client
+ * 4. Saving the assistant's response when complete
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> }
+) {
+  try {
+    const userId = request.cookies.get("chat_user_id")?.value;
+    if (!userId) {
+      return NextResponse.json({ error: "User ID not found" }, { status: 401 });
+    }
+
+    const paramsData = await params;
+    const sessionId = paramsData.sessionId;
+
+    const validation = await parseAndValidateJSON(request, SessionMessageRequestSchema);
+
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const { message, processWithAgent } = validation.data;
+
+    // Ensure timestamp is in ISO string format
+    if (message.timestamp) {
+      message.timestamp = toISOString(message.timestamp);
+    }
+    const sessionKey = `${userId}_${sessionId}`;
+    const sessionResponse = await getKVValue<Session>(sessionKey, {
+      storeName: config.defaultStoreName,
+    });
+
+    // Helper: background title generation and persistence
+    async function generateAndPersistTitle(sessionId: string, sessionKey: string, finalSession: Session) {
+      try {
+        if ((finalSession as any).title) {
+          return; // Title already set
+        }
+        // Build compact conversation history (last 10 messages, truncate content)
+        const HISTORY_LIMIT = 10;
+        const MAX_CONTENT_LEN = 400;
+        const history = finalSession.messages
+          .slice(-HISTORY_LIMIT)
+          .map(m => ({
+            author: m.author,
+            content: (m.content || '').slice(0, MAX_CONTENT_LEN),
+          }));
+
+        const prompt = `Generate a very short session title summarizing the conversation topic.\n\nRequirements:\n- sentence case\n- no emojis\n- <= 60 characters\n- no quotes or markdown\n- output the title only, no extra text`;
+
+        const agentConfig = getAgentPulseConfig();
+        const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+        if (agentConfig.bearerToken) headers['Authorization'] = `Bearer ${agentConfig.bearerToken}`;
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 3000);
+        let agentResponse: Response | null = null;
+        try {
+          agentResponse = await fetch(agentConfig.url, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+              message: prompt,
+              conversationHistory: history,
+              use_direct_llm: true,
+            }),
+            signal: controller.signal,
+          });
+        } finally {
+          clearTimeout(timeoutId);
+        }
+
+        if (!agentResponse || !agentResponse.ok) {
+          console.error(`[title-gen] failed: bad response ${agentResponse ? agentResponse.status : 'no-response'}`);
+          return;
+        }
+
+        const reader = agentResponse.body?.getReader();
+        if (!reader) {
+          console.error('[title-gen] failed: no response body');
+          return;
+        }
+
+        let accumulated = '';
+        const textDecoder = new TextDecoder();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (value) {
+            const text = textDecoder.decode(value);
+            for (const line of text.split('\n')) {
+              if (line.startsWith('data: ')) {
+                try {
+                  const ev = JSON.parse(line.slice(6));
+                  if (ev.type === 'text-delta' && ev.textDelta) accumulated += ev.textDelta;
+                  if (ev.type === 'finish') {
+                    try { await reader.cancel(); } catch { }
+                    break;
+                  }
+                } catch { }
+              }
+            }
+          }
+        }
+
+        const candidate = sanitizeTitle(accumulated);
+        const title = candidate || 'New chat';
+
+        // Re-fetch and set title only if still empty
+        const latest = await getKVValue<Session>(sessionKey, { storeName: config.defaultStoreName });
+        if (!latest.success || !latest.data) return;
+        const current = latest.data as any;
+        if (current.title) return;
+        current.title = title;
+        await setKVValue(sessionKey, current, { storeName: config.defaultStoreName });
+
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        if (msg.includes('The operation was aborted') || msg.includes('aborted')) {
+          console.error('[title-gen] timeout after 3000ms');
+        } else {
+          console.error(`[title-gen] failed: ${msg}`);
+        }
+      }
+    }
+    if (!sessionResponse.success || !sessionResponse.data) {
+      return NextResponse.json({ error: "Session not found" }, { status: 404 });
+    }
+
+    const session = sessionResponse.data;
+
+    const updatedSession: Session = {
+      ...session,
+      messages: [...session.messages, message],
+    };
+
+    try {
+      await setKVValue(sessionKey, updatedSession, {
+        storeName: config.defaultStoreName,
+      });
+    } catch (error) {
+      console.error(
+        `Failed to save session after adding message. SessionId: ${sessionId}, Error details:`,
+        error instanceof Error ? error.message : String(error),
+        error instanceof Error && error.stack ? `Stack: ${error.stack}` : ''
+      );
+      return NextResponse.json(
+        {
+          error: "Failed to save message to session",
+          details: "Unable to persist the message. Please try again."
+        },
+        { status: 500 }
+      );
+    }
+
+    if (!processWithAgent || message.author !== "USER") {
+      return NextResponse.json(
+        { success: true, session: updatedSession },
+        { status: 200 }
+      );
+    }
+
+    // Create assistant message placeholder for tracking
+    const assistantMessageId = crypto.randomUUID();
+
+    // Process with agent and stream response
+    const agentConfig = getAgentPulseConfig();
+    const agentUrl = agentConfig.url;
+
+    // Get current tutorial state for the user
+    const { TutorialStateManager } = await import('@/lib/tutorial/state-manager');
+    const currentTutorialState = await TutorialStateManager.getCurrentTutorialState(userId);
+
+    const agentPayload = {
+      message: message.content,
+      conversationHistory: updatedSession.messages.slice(
+        -DEFAULT_CONVERSATION_HISTORY_LIMIT
+      ),
+      tutorialData: currentTutorialState,
+    };
+
+    // Prepare headers with optional bearer token
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    };
+    if (agentConfig.bearerToken) {
+      headers["Authorization"] = `Bearer ${agentConfig.bearerToken}`;
+    }
+
+    // Real agent call (SSE response expected)
+    const agentResponse = await fetch(agentUrl, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(agentPayload),
+      signal: AbortSignal.timeout(AGENT_REQUEST_TIMEOUT),
+    });
+
+    if (!agentResponse.ok) {
+      throw new Error(`Agent responded with status: ${agentResponse.status}`);
+    }
+
+    // Process streaming response
+    let accumulatedContent = "";
+    let finalTutorialData: TutorialData | undefined = undefined;
+
+    const transformStream = new TransformStream({
+      async transform(chunk, controller) {
+        // Forward the chunk to the client
+        controller.enqueue(chunk);
+
+        // Process the chunk to accumulate the full response
+        const text = new TextDecoder().decode(chunk);
+        const lines = text.split("\n");
+
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            try {
+              const data = JSON.parse(line.slice(6)) as StreamingChunk;
+
+              if (data.type === "text-delta" && data.textDelta) {
+                accumulatedContent += data.textDelta;
+              } else if (data.type === "tutorial-data" && data.tutorialData) {
+                finalTutorialData = data.tutorialData;
+
+                // Update user's tutorial progress
+                await TutorialStateManager.updateTutorialProgress(
+                  userId,
+                  finalTutorialData.tutorialId,
+                  finalTutorialData.currentStep,
+                  finalTutorialData.totalSteps
+                );
+              } else if (data.type === "finish") {
+                // When the stream is finished, save the assistant message
+                const assistantMessage: Message = {
+                  id: assistantMessageId,
+                  author: "ASSISTANT",
+                  content: accumulatedContent,
+                  timestamp: getCurrentTimestamp(),
+                  tutorialData: finalTutorialData,
+                };
+
+                const finalSession = {
+                  ...updatedSession,
+                  messages: [...updatedSession.messages, assistantMessage],
+                };
+
+                await setKVValue(sessionKey, finalSession, {
+                  storeName: config.defaultStoreName,
+                });
+
+                // Trigger background title generation if missing
+                // Do not await to avoid delaying the client stream completion
+                void generateAndPersistTitle(sessionId, sessionKey, finalSession);
+
+                // Send the final session in the finish event
+                controller.enqueue(
+                  new TextEncoder().encode(
+                    `data: ${JSON.stringify({
+                      type: "finish",
+                      session: finalSession,
+                    })}\n\n`
+                  )
+                );
+              }
+            } catch (error) {
+              console.error("Error processing stream chunk:", error);
+            }
+          }
+        }
+      },
+    });
+
+    // Pipe the agent response through our transform stream
+    const reader = agentResponse.body?.getReader();
+    if (!reader) {
+      throw new Error("No response body from agent");
+    }
+    const writer = transformStream.writable.getWriter();
+    (async () => {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+          try {
+            await writer.write(value);
+          } catch (writeError) {
+            console.error('Error writing to transform stream:', writeError);
+            throw writeError;
+          }
+        }
+        await writer.close();
+      } catch (error) {
+        console.error('Error in stream processing:', error);
+        writer.abort(error);
+      }
+    })();
+
+    return new NextResponse(transformStream.readable, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
+  } catch (error) {
+    console.error("Error in messages API:", error);
+    // Log the full error stack trace for debugging
+    if (error instanceof Error) {
+      console.error("Error stack:", error.stack);
+    }
+    return new Response(
+      JSON.stringify({
+        error: "Internal server error",
+        details: error instanceof Error ? error.message : String(error),
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}
diff --git a/app/api/sessions/[sessionId]/route.ts b/app/api/sessions/[sessionId]/route.ts
new file mode 100644
index 00000000..a3900650
--- /dev/null
+++ b/app/api/sessions/[sessionId]/route.ts
@@ -0,0 +1,266 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getKVValue, setKVValue, deleteKVValue } from '@/lib/kv-store';
+import { Session, Message, SessionSchema } from '@/app/chat/types';
+import { toISOString } from '@/app/chat/utils/dateUtils';
+import { config } from '@/lib/config';
+import { parseAndValidateJSON, SessionMessageOnlyRequestSchema } from '@/lib/validation/middleware';
+
+/**
+ * GET /api/sessions/[sessionId] - Get a specific session
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> }
+) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const paramsData = await params;
+    const sessionId = paramsData.sessionId;
+    const sessionKey = `${userId}_${sessionId}`;
+    const response = await getKVValue<Session>(sessionKey, { storeName: config.defaultStoreName });
+
+    if (!response.success) {
+      return NextResponse.json(
+        { error: response.error || 'Session not found' },
+        { status: response.statusCode || 404 }
+      );
+    }
+
+    return NextResponse.json({ session: response.data });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * PUT /api/sessions/[sessionId] - Update a session
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> }
+) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const paramsData = await params;
+    const sessionId = paramsData.sessionId;
+    const sessionKey = `${userId}_${sessionId}`;
+
+    const validation = await parseAndValidateJSON(request, SessionSchema);
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const session = validation.data;
+
+    if (session.sessionId !== sessionId) {
+      return NextResponse.json(
+        { error: 'Session ID mismatch' },
+        { status: 400 }
+      );
+    }
+
+    // Process any messages to ensure timestamps are in ISO string format
+    if (session.messages && session.messages.length > 0) {
+      session.messages = session.messages.map((message: Message) => {
+        if (message.timestamp) {
+          return {
+            ...message,
+            timestamp: toISOString(message.timestamp)
+          };
+        }
+        return message;
+      });
+    }
+
+    // Update the individual session
+    const response = await setKVValue(
+      sessionKey,
+      session,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!response.success) {
+      return NextResponse.json(
+        { error: response.error || 'Failed to update session' },
+        { status: response.statusCode || 500 }
+      );
+    }
+
+    // Update the master list if needed (ensure the session ID is in the list)
+    const allSessionsResponse = await getKVValue<string[]>(userId, { storeName: config.defaultStoreName });
+    const sessionIds = allSessionsResponse.success ? allSessionsResponse.data || [] : [];
+
+    // If the session ID isn't in the list, add it to the beginning
+    if (!sessionIds.includes(sessionKey)) {
+      const updatedSessionIds = [sessionKey, ...sessionIds];
+
+      const sessionsListResponse = await setKVValue(
+        userId,
+        updatedSessionIds,
+        { storeName: config.defaultStoreName }
+      );
+
+      if (!sessionsListResponse.success) {
+        // Log the error but don't fail the request
+        console.error('Failed to update sessions list:', sessionsListResponse.error);
+      }
+    }
+
+    return NextResponse.json({ success: true, session });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * DELETE /api/sessions/[sessionId] - Delete a session
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> }
+) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const paramsData = await params;
+    const sessionId = paramsData.sessionId;
+    const sessionKey = `${userId}_${sessionId}`;
+    // Delete the session data
+    const sessionResponse = await deleteKVValue(
+      sessionKey,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!sessionResponse.success) {
+      return NextResponse.json(
+        { error: sessionResponse.error || 'Failed to delete session' },
+        { status: sessionResponse.statusCode || 500 }
+      );
+    }
+
+    // Remove from sessions list
+    const allSessionsResponse = await getKVValue<string[]>(userId, { storeName: config.defaultStoreName });
+    const sessionIds = allSessionsResponse.success ? allSessionsResponse.data || [] : [];
+
+    const updatedSessionIds = sessionIds.filter(id => id !== sessionKey);
+
+    const sessionsListResponse = await setKVValue(
+      userId,
+      updatedSessionIds,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!sessionsListResponse.success) {
+      return NextResponse.json(
+        { error: sessionsListResponse.error || 'Failed to update sessions list' },
+        { status: sessionsListResponse.statusCode || 500 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/sessions/[sessionId]/messages - Add a message to a session
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> }
+) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const paramsData = await params;
+    const sessionId = paramsData.sessionId;
+    const sessionKey = `${userId}_${sessionId}`;
+
+    const validation = await parseAndValidateJSON(request, SessionMessageOnlyRequestSchema);
+
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const { message } = validation.data;
+
+    // Get current session
+    const sessionResponse = await getKVValue<Session>(sessionKey, { storeName: config.defaultStoreName });
+    if (!sessionResponse.success || !sessionResponse.data) {
+      return NextResponse.json(
+        { error: 'Session not found' },
+        { status: 404 }
+      );
+    }
+
+    const session = sessionResponse.data;
+    const updatedSession: Session = {
+      ...session,
+      messages: [...session.messages, message]
+    };
+
+    // Update the individual session
+    const updateResponse = await setKVValue(
+      sessionKey,
+      updatedSession,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!updateResponse.success) {
+      return NextResponse.json(
+        { error: updateResponse.error || 'Failed to update session' },
+        { status: updateResponse.statusCode || 500 }
+      );
+    }
+
+    // Move this session ID to the top of the master list (most recently used)
+    const allSessionsResponse = await getKVValue<string[]>(userId, { storeName: config.defaultStoreName });
+    const sessionIds = allSessionsResponse.success ? allSessionsResponse.data || [] : [];
+
+    // Remove the current session ID if it exists and add it to the beginning
+    const filteredSessionIds = sessionIds.filter(id => id !== sessionKey);
+    const updatedSessionIds = [sessionKey, ...filteredSessionIds];
+
+    const sessionsListResponse = await setKVValue(
+      userId,
+      updatedSessionIds,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!sessionsListResponse.success) {
+      // Log the error but don't fail the request since we already updated the individual session
+      console.error('Failed to update sessions list:', sessionsListResponse.error);
+    }
+
+    return NextResponse.json({ success: true, session: updatedSession });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/sessions/route.ts b/app/api/sessions/route.ts
new file mode 100644
index 00000000..bd6a97f2
--- /dev/null
+++ b/app/api/sessions/route.ts
@@ -0,0 +1,149 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getKVValue, setKVValue } from '@/lib/kv-store';
+import { Session, Message, SessionSchema } from '@/app/chat/types';
+import { toISOString } from '@/app/chat/utils/dateUtils';
+import { config } from '@/lib/config';
+import { parseAndValidateJSON } from '@/lib/validation/middleware';
+
+// Constants
+const DEFAULT_SESSIONS_LIMIT = 10;
+const MAX_SESSIONS_LIMIT = 50;
+
+/**
+ * GET /api/sessions - Get all sessions (paginated)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const searchParams = request.nextUrl.searchParams;
+    const parsedLimit = Number.parseInt(searchParams.get('limit') ?? String(DEFAULT_SESSIONS_LIMIT));
+    const parsedCursor = Number.parseInt(searchParams.get('cursor') ?? '0');
+
+    const limit = Number.isFinite(parsedLimit) ? Math.min(Math.max(parsedLimit, 1), MAX_SESSIONS_LIMIT) : DEFAULT_SESSIONS_LIMIT;
+    const cursor = Number.isFinite(parsedCursor) ? Math.max(parsedCursor, 0) : 0;
+
+    const response = await getKVValue<string[]>(userId, { storeName: config.defaultStoreName });
+    if (!response.success) {
+      if (response.statusCode === 404) {
+        return NextResponse.json({ sessions: [], pagination: { cursor, nextCursor: null, hasMore: false, total: 0, limit } });
+      }
+      return NextResponse.json(
+        { error: response.error || 'Failed to retrieve sessions' },
+        { status: response.statusCode || 500 }
+      );
+    }
+    
+    if (!response.data?.length) {
+      return NextResponse.json({ sessions: [], pagination: { cursor, nextCursor: null, hasMore: false, total: 0, limit } });
+    }
+
+    const sessionIds = response.data;
+    const total = sessionIds.length;
+
+    const start = Math.min(cursor, total);
+    const end = Math.min(start + limit, total);
+    const pageIds = sessionIds.slice(start, end);
+
+    const sessionPromises = pageIds.map(sessionId => getKVValue<Session>(sessionId, { storeName: config.defaultStoreName }));
+    const sessionResults = await Promise.all(sessionPromises);
+    const sessions = sessionResults
+      .filter(result => result.success && result.data)
+      .map(result => result.data as Session);
+
+    const hasMore = end < total;
+    const nextCursor = hasMore ? end : null;
+
+    return NextResponse.json({
+      sessions,
+      pagination: { cursor: start, nextCursor, hasMore, total, limit }
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/sessions - Create a new session
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const validation = await parseAndValidateJSON(request, SessionSchema);
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const session = validation.data;
+
+    // Process any messages to ensure timestamps are in ISO string format
+    if (session.messages && session.messages.length > 0) {
+      session.messages = session.messages.map((message: Message) => {
+        if (message.timestamp) {
+          return {
+            ...message,
+            timestamp: toISOString(message.timestamp)
+          };
+        }
+        return message;
+      });
+    }
+
+    const sessionKey = `${userId}_${session.sessionId}`;
+
+    // Save the session data
+    const sessionResponse = await setKVValue(
+      sessionKey,
+      session,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!sessionResponse.success) {
+      return NextResponse.json(
+        { error: sessionResponse.error || 'Failed to create session' },
+        { status: sessionResponse.statusCode || 500 }
+      );
+    }
+
+    // Update the sessions list with just the session ID
+    const allSessionsResponse = await getKVValue<string[]>(userId, { storeName: config.defaultStoreName });
+    const sessionIds = allSessionsResponse.success ? allSessionsResponse.data || [] : [];
+
+    // Add the new session ID to the beginning of the array
+    const updatedSessionIds = [sessionKey, ...sessionIds.filter(id => id !== sessionKey)];
+
+    const sessionsListResponse = await setKVValue(
+      userId,
+      updatedSessionIds,
+      { storeName: config.defaultStoreName }
+    );
+
+    if (!sessionsListResponse.success) {
+      return NextResponse.json(
+        { error: sessionsListResponse.error || 'Failed to update sessions list' },
+        { status: sessionsListResponse.statusCode || 500 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      session,
+      ...(session.title ? {} : { titleGeneration: 'pending' })
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Unknown error occurred' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/users/tutorial-state/route.ts b/app/api/users/tutorial-state/route.ts
new file mode 100644
index 00000000..70557fa7
--- /dev/null
+++ b/app/api/users/tutorial-state/route.ts
@@ -0,0 +1,119 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { TutorialStateManager } from '@/lib/tutorial/state-manager';
+import { setKVValue } from '@/lib/kv-store';
+import { config } from '@/lib/config';
+import { 
+  parseAndValidateJSON, 
+  TutorialProgressRequestSchema, 
+  TutorialResetRequestSchema 
+} from '@/lib/validation/middleware';
+
+/**
+ * GET /api/users/tutorial-state - Get current user's tutorial state
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const tutorialState = await TutorialStateManager.getUserTutorialState(userId);
+
+    return NextResponse.json({
+      success: true,
+      data: tutorialState
+    });
+  } catch (error) {
+    console.error('Error getting tutorial state:', error);
+    return NextResponse.json(
+      { error: 'Failed to get tutorial state' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * POST /api/users/tutorial-state - Update tutorial progress
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const validation = await parseAndValidateJSON(request, TutorialProgressRequestSchema);
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const { tutorialId, currentStep, totalSteps } = validation.data;
+
+    await TutorialStateManager.updateTutorialProgress(
+      userId,
+      tutorialId,
+      currentStep,
+      totalSteps
+    );
+
+    return NextResponse.json({
+      success: true,
+      message: 'Tutorial progress updated'
+    });
+  } catch (error) {
+    console.error('Error updating tutorial state:', error);
+    return NextResponse.json(
+      { error: 'Failed to update tutorial state' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * DELETE /api/users/tutorial-state - Reset tutorial progress
+ */
+export async function DELETE(request: NextRequest) {
+  try {
+    const userId = request.cookies.get('chat_user_id')?.value;
+    if (!userId) {
+      return NextResponse.json({ error: 'User ID not found' }, { status: 401 });
+    }
+
+    const validation = await parseAndValidateJSON(request, TutorialResetRequestSchema);
+    if (!validation.success) {
+      return validation.response;
+    }
+
+    const { tutorialId } = validation.data;
+
+    const state = await TutorialStateManager.getUserTutorialState(userId);
+    if (!state.tutorials) {
+      state.tutorials = {};
+    }
+    delete state.tutorials[tutorialId];
+
+    // Save the updated state
+    const kvResponse = await setKVValue(`tutorial_state_${userId}`, state, {
+      storeName: config.defaultStoreName
+    });
+
+    if (!kvResponse.success) {
+      return NextResponse.json(
+        { error: kvResponse.error || 'Failed to reset tutorial state' },
+        { status: kvResponse.statusCode || 500 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: 'Tutorial progress reset'
+    });
+  } catch (error) {
+    console.error('Error resetting tutorial state:', error);
+    return NextResponse.json(
+      { error: 'Failed to reset tutorial state' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/chat/SessionContext.tsx b/app/chat/SessionContext.tsx
new file mode 100644
index 00000000..a4a3b42b
--- /dev/null
+++ b/app/chat/SessionContext.tsx
@@ -0,0 +1,21 @@
+'use client';
+import { createContext, useContext } from 'react';
+import { Session } from './types';
+
+interface SessionContextType {
+  sessions: Session[];
+  setSessions: (updater: React.SetStateAction<Session[]>, options?: { revalidate: boolean }) => void;
+  currentSessionId: string;
+  // A simple trigger to revalidate sessions; implementation may vary under the hood
+  revalidateSessions?: () => void | Promise<any>;
+}
+
+export const SessionContext = createContext<SessionContextType | undefined>(undefined);
+
+export const useSessions = () => {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error('useSessions must be used within a SessionProvider');
+  }
+  return context;
+};
diff --git a/app/chat/[sessionId]/page.tsx b/app/chat/[sessionId]/page.tsx
new file mode 100644
index 00000000..ef569ef4
--- /dev/null
+++ b/app/chat/[sessionId]/page.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from "next/navigation";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
+import { v4 as uuidv4 } from 'uuid';
+import { ChatMessagesArea } from '../components/ChatMessagesArea';
+import { CodeEditor } from '../components/CodeEditor';
+import { Session, Message } from '../types';
+import { useSessions } from '../SessionContext';
+import { sessionService } from '../services/sessionService';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ChatSessionPage() {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const [session, setSession] = useState<Session | undefined>();
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editorContent, setEditorContent] = useState<string>('');
+  const { sessions, setSessions, revalidateSessions } = useSessions();
+  const [creationError, setCreationError] = useState<string | null>(null);
+
+
+  const handleSendMessage = async (content: string, sessionId: string) => {
+    if (!content || !sessionId) return;
+
+    const newMessage: Message = {
+      id: uuidv4(),
+      author: 'USER',
+      content: content,
+      timestamp: new Date().toISOString()
+    };
+
+    const assistantMessage: Message = {
+      id: uuidv4(),
+      author: 'ASSISTANT',
+      content: '',
+      timestamp: new Date().toISOString()
+    };
+
+    try {
+      setSession(prevSession => {
+        if (!prevSession) return prevSession;
+        return {
+          ...prevSession,
+          messages: [...prevSession.messages, newMessage, assistantMessage]
+        };
+      });
+
+      await sessionService.addMessageToSessionStreaming(
+        sessionId,
+        newMessage,
+        {
+          onTextDelta: (textDelta) => {
+            setSession(prev => {
+              if (!prev) return prev;
+              const updatedMessages = prev.messages.map(msg => {
+                if (msg.id === assistantMessage.id) {
+                  return {
+                    ...msg,
+                    content: msg.content + textDelta
+                  };
+                }
+                return msg;
+              });
+              return { ...prev, messages: updatedMessages };
+            });
+          },
+
+          onTutorialData: (tutorialData) => {
+            setSession(prev => {
+              if (!prev) return prev;
+              const updatedMessages = prev.messages.map(msg =>
+                msg.id === assistantMessage.id
+                  ? { ...msg, tutorialData: tutorialData }
+                  : msg
+              );
+              return { ...prev, messages: updatedMessages };
+            });
+          },
+
+          onFinish: (finalSession) => {
+            setSession(finalSession);
+            setSessions(prev => prev.map(s => s.sessionId === sessionId ? finalSession : s));
+          },
+
+          onError: (error) => {
+            console.error('Error sending message:', error);
+            setSession(prev => {
+              if (!prev) return prev;
+              const updatedMessages = prev.messages.map(msg =>
+                msg.id === assistantMessage.id
+                  ? { ...msg, content: 'Sorry, I encountered an error. Please try again.' }
+                  : msg
+              );
+              return { ...prev, messages: updatedMessages };
+            });
+          }
+        }
+      );
+
+    } catch (error) {
+      console.error('Error sending message:', error);
+      setSession(prevSession => {
+        if (!prevSession) return prevSession;
+        const filteredMessages = prevSession.messages.filter(msg =>
+          msg.id !== newMessage.id && msg.id !== assistantMessage.id
+        );
+        return { ...prevSession, messages: filteredMessages };
+      });
+    }
+  };
+
+  useEffect(() => {
+    const foundSession = sessions.find(s => s.sessionId === sessionId);
+    if (foundSession) {
+      setSession(foundSession);
+      return;
+    }
+
+    const storageKey = `initialMessage:${sessionId}`;
+    const initialMessage = sessionStorage.getItem(storageKey);
+    if (!initialMessage) {
+      return;
+    }
+    sessionStorage.removeItem(storageKey);
+
+    const userMessage: Message = {
+      id: uuidv4(),
+      author: 'USER',
+      content: initialMessage,
+      timestamp: new Date().toISOString(),
+    };
+    const assistantPlaceholder: Message = {
+      id: uuidv4(),
+      author: 'ASSISTANT',
+      content: '',
+      timestamp: new Date().toISOString(),
+    };
+    const temporarySession: Session = {
+      sessionId: sessionId as string,
+      messages: [userMessage, assistantPlaceholder],
+    };
+
+    setSession(temporarySession);
+
+    sessionService.createSession({
+      sessionId: sessionId as string,
+      messages: []
+    })
+      .then(async response => {
+        if (response.success && response.data) {
+          setSession(response.data);
+          await handleSendMessage(initialMessage, sessionId);
+        } else {
+          setCreationError(response.error || 'Failed to create session');
+          revalidateSessions?.();
+        }
+      })
+      .catch(error => {
+        setCreationError(error.message || 'Error creating session');
+        revalidateSessions?.();
+      });
+  }, [sessionId]);
+
+
+  const toggleEditor = () => { setEditorOpen(false) };
+  const stopServer = () => { };
+
+  return (
+    <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden overflow-y-auto uity-scrollbar relative">
+      {/* Non-blocking error banner */}
+      {creationError && (
+        <div className="absolute top-2 right-2 z-50 bg-red-500/20 border border-red-500/40 text-red-200 text-sm px-3 py-2 rounded-md backdrop-blur">
+          <div className="flex items-center gap-3">
+            <span>Error creating session: {creationError}</span>
+            <button
+              onClick={() => revalidateSessions?.()}
+              className="px-2 py-0.5 text-xs rounded bg-red-500/30 hover:bg-red-500/40 border border-red-500/50"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      )}
+
+      <Allotment>
+        <Allotment.Pane minSize={300}>
+          <div className="flex-1 flex flex-col items-center h-full overflow-hidden">
+            <div className="w-full max-w-3xl flex-1 flex flex-col h-full">
+              {session ? (
+                <ChatMessagesArea
+                  session={session}
+                  handleSendMessage={handleSendMessage}
+                  setEditorContent={setEditorContent}
+                  setEditorOpen={() => { setEditorOpen(true) }}
+                />
+              ) : (
+                <div className="p-6 space-y-4">
+                  <Skeleton className="h-6 w-40" />
+                  <div className="space-y-3">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div key={i} className="space-y-2">
+                        <Skeleton className="h-4 w-2/3" />
+                        <Skeleton className="h-3 w-1/2" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </Allotment.Pane>
+        {editorOpen && (
+          <Allotment.Pane>
+            <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
+              <CodeEditor
+                executionResult={''}
+                serverRunning={false}
+                executingFiles={[]}
+                runCode={() => { }}
+                stopServer={stopServer}
+                editorContent={editorContent}
+                setEditorContent={setEditorContent}
+                toggleEditor={toggleEditor}
+              />
+            </div>
+          </Allotment.Pane>
+        )}
+      </Allotment>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/chat/components/ChatInput.tsx b/app/chat/components/ChatInput.tsx
new file mode 100644
index 00000000..0422b2ac
--- /dev/null
+++ b/app/chat/components/ChatInput.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect, KeyboardEvent, useState } from 'react';
+import { Send } from 'lucide-react';
+import { useAutoResize } from '../utils/useAutoResize';
+
+interface ChatInputProps {
+  loading?: boolean;
+  onSendMessage: (message: string) => void;
+}
+
+export function ChatInput({
+  loading = false,
+  onSendMessage
+}: ChatInputProps) {
+  const [currentInput, setCurrentInput] = useState('');
+  const { textareaRef } = useAutoResize(currentInput, { maxHeight: 320 });
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!loading) {
+      textareaRef.current?.focus();
+    }
+  }, [loading]);
+
+  const handleSend = () => {
+    if (currentInput.trim() && !loading) {
+      onSendMessage(currentInput.trim());
+      setCurrentInput('');
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (!e.shiftKey || e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="flex p-2 gap-2 bg-transparent border border-white/10 rounded-xl relative z-50">
+      {/* Textarea Container */}
+      <div className="flex-1 min-w-0 relative">
+        <div className="relative overflow-hidden">
+          <textarea
+            ref={textareaRef}
+            value={currentInput}
+            onChange={(e) => setCurrentInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask about Agentuity or request tutorials..."
+            className="w-full px-3 py-2 text-sm text-gray-200 placeholder-gray-400
+          bg-transparent border-0 focus:outline-none agentuity-scrollbar
+          min-h-[40px] max-h-[16rem] pr-10 overflow-y-auto resize-none"
+            rows={2}
+          />
+        </div>
+      </div>
+
+      {/* Send button positioned at bottom right */}
+      <button
+        onClick={handleSend}
+        disabled={loading || !currentInput.trim()}
+        className="group h-8 w-8 agentuity-button-primary disabled:agentuity-button disabled:text-gray-300 text-white text-sm rounded-lg transition-all duration-200 disabled:cursor-not-allowed flex items-center justify-center flex-shrink-0 self-end"
+        aria-label="Send message"
+        type="button"
+      >
+        <Send className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/chat/components/ChatMessage.tsx b/app/chat/components/ChatMessage.tsx
new file mode 100644
index 00000000..4c340d2d
--- /dev/null
+++ b/app/chat/components/ChatMessage.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { User } from 'lucide-react';
+import { AgentuityLogo } from '@/components/icons/AgentuityLogo';
+import { MarkdownRenderer } from './MarkdownRenderer';
+import type { TutorialSnippet } from '../types';
+import { formatTime } from '../utils/dateUtils';
+import { TutorialData } from '../types';
+
+function transformMdxWithSnippets(mdx: string, snippets: TutorialSnippet[] = []) {
+    // Replace each <CodeFromFiles .../> by consuming the appropriate number of snippets
+    // based on the number of objects in its snippets={[ ... ]} prop.
+    const tagRegex = /<CodeFromFiles\s+([^>]*?)\/>/g;
+    let cursor = 0;
+    return mdx.replace(tagRegex, (_full, propsSrc: string) => {
+        const key = 'snippets={';
+        const start = (propsSrc || '').indexOf(key);
+        let count = start >= 0 ? 0 : 1;
+        if (start >= 0) {
+            // Balance braces to find the end of the snippets array
+            let i = start + key.length;
+            let depth = 1;
+            while (i < propsSrc.length && depth > 0) {
+                const ch = propsSrc[i];
+                if (ch === '{') depth++;
+                else if (ch === '}') depth--;
+                i++;
+            }
+            const inner = propsSrc.slice(start + key.length, i - 1);
+            // Count object literals in the array
+            let j = 0;
+            count = 0;
+            while (j < inner.length) {
+                if (inner[j] === '{') {
+                    let d = 1;
+                    let k = j + 1;
+                    while (k < inner.length && d > 0) {
+                        const ch = inner[k];
+                        if (ch === '{') d++;
+                        else if (ch === '}') d--;
+                        k++;
+                    }
+                    count++;
+                    j = k;
+                } else {
+                    j++;
+                }
+            }
+        }
+
+        const group = snippets.slice(cursor, cursor + count);
+        const consumed = group.length;
+        cursor += consumed;
+        if (group.length === 0) return '';
+
+        // Render as sequential fenced blocks for chat (no tabs in chat)
+        // Move the label above the code fence to avoid injecting language-specific comment syntax
+        return '\n\n' + group.map((s) => {
+            const lang = s.lang || 'text';
+            const label = s.title || s.path.split('/').pop() || s.path;
+            return `**${label}**\n\`\`\`${lang}\n${s.content}\n\`\`\``;
+        }).join('\n\n') + '\n\n';
+    });
+}
+
+interface ChatMessageProps {
+    message: {
+        author: 'USER' | 'ASSISTANT';
+        content: string;
+        timestamp: string;
+        tutorialData?: TutorialData
+    };
+    setEditorContent?: (content: string) => void;
+    setEditorOpen?: (open: boolean) => void;
+}
+export const ChatMessageComponent = React.memo(function ChatMessageComponent({
+    message,
+    setEditorContent = () => { },
+    setEditorOpen = () => { }
+}: ChatMessageProps) {
+
+    const tutorialMdx = message.tutorialData?.tutorialStep.mdx;
+    const tutorialSnippets = message.tutorialData?.tutorialStep.snippets as TutorialSnippet[] | undefined;
+    const currentStep = message.tutorialData?.currentStep;
+    const totalSteps = message.tutorialData?.totalSteps;
+    
+    // Memoize tutorial content transformation to avoid Rules of Hooks violation
+    const memoizedTutorialContent = useMemo(() => 
+        tutorialMdx ? transformMdxWithSnippets(tutorialMdx, tutorialSnippets || []) : null, 
+        [tutorialMdx, tutorialSnippets]
+    );
+    
+    const handleOpenInEditor = (code: string) => {
+        setEditorContent(code);
+        setEditorOpen(true);
+    };
+
+    return (
+        <div className={`flex gap-4 ${message.author === 'USER' ? 'justify-end' : 'justify-start'}`}>
+            {message.author === 'ASSISTANT' && (
+                <div className="w-8 h-8 bg-gradient-to-br from-cyan-400/20 to-cyan-600/20 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0 mt-1 border border-white/30 dark:border-gray-700/30 shadow-sm">
+                    <AgentuityLogo className="w-4 h-4 text-cyan-600 dark:text-cyan-400" />
+                </div>
+            )}
+
+            <div className={`max-w-[80%] ${message.author === 'USER' ? 'order-last' : ''}`}>
+                <div className={`rounded-xl px-4 py-3 ${message.author === 'USER'
+                    ? 'agentuity-button-primary text-white ml-auto'
+                    : 'agentuity-card text-gray-200'
+                    }`}>
+
+                    {message.author === 'ASSISTANT' ? (
+                        <div className="prose prose-sm max-w-none prose-invert text-sm text-gray-200">
+                            {message.content === '' ? (
+                                <div className="flex items-center gap-4 text-gray-300 mb-4">
+                                    <div className="flex space-x-2">
+                                        <div className="w-3 h-3 bg-gradient-to-br from-cyan-400 to-teal-500 rounded-full animate-[pulse_1.2s_ease-in-out_infinite]"/>
+                                        <div className="w-3 h-3 bg-gradient-to-br from-cyan-400 to-teal-500 rounded-full animate-[pulse_1.2s_ease-in-out_infinite_0.2s]"/>
+                                        <div className="w-3 h-3 bg-gradient-to-br from-cyan-400 to-teal-500 rounded-full animate-[pulse_1.2s_ease-in-out_infinite_0.4s]"/>
+                                    </div>
+                                    <span className="text-sm tracking-wide text-gray-200">Agent is processing...</span>
+                                </div>
+                            ) : (
+                                <MarkdownRenderer
+                                    content={message.content}
+                                />
+                            )}
+                            {/* Render tutorial content if present */}
+                            {tutorialMdx && memoizedTutorialContent && (
+                                <div className="mt-4 p-3 bg-gray-700/30 rounded-lg">
+                                    <h4 className="text-sm font-semibold mb-2 text-gray-100">Step {currentStep} of {totalSteps}</h4>
+                                    <MarkdownRenderer content={memoizedTutorialContent} />
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <p className="text-sm whitespace-pre-wrap break-words">{message.content}</p>
+                    )}
+                </div>
+
+                {/* Timestamp */}
+                <div className="text-xs text-gray-300 mt-2 px-2">
+                    {formatTime(message.timestamp)}
+                </div>
+            </div>
+
+            {message.author === 'USER' && (
+                <div className="w-8 h-8 bg-gradient-to-br from-gray-200/70 to-gray-300/70 dark:from-gray-600/70 dark:to-gray-700/70 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0 mt-1 border border-white/30 dark:border-gray-700/30 shadow-sm">
+                    <User className="w-4 h-4 text-gray-300" />
+                </div>
+            )}
+        </div>
+    );
+}); 
\ No newline at end of file
diff --git a/app/chat/components/ChatMessagesArea.tsx b/app/chat/components/ChatMessagesArea.tsx
new file mode 100644
index 00000000..e8ebd11c
--- /dev/null
+++ b/app/chat/components/ChatMessagesArea.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React, { useRef, useEffect,useState } from 'react';
+import { ChatMessageComponent } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { Session } from '../types';
+
+export interface ChatMessagesAreaProps {
+    session: Session
+    handleSendMessage: (content: string, sessionId: string) => void;
+    setEditorContent?: (content: string) => void;
+    setEditorOpen?: (isOpen: boolean) => void;
+}
+
+export function ChatMessagesArea({
+    session,
+    handleSendMessage,
+    setEditorContent = () => { },
+    setEditorOpen = () => { }
+}: ChatMessagesAreaProps) {
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
+    const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+
+    // Check if user has scrolled up
+    const handleScroll = () => {
+        if (!messagesContainerRef.current) return;
+        const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+        setShouldAutoScroll(isAtBottom);
+    };
+
+    // Auto-scroll only if user is at bottom
+    useEffect(() => {
+        if (shouldAutoScroll) {
+            messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [session.messages, shouldAutoScroll]);
+
+    // Add scroll listener to the messages container
+    useEffect(() => {
+        const container = messagesContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll);
+            return () => container.removeEventListener('scroll', handleScroll);
+        }
+    }, []);
+
+
+    return (
+        <div className="flex-1 flex flex-col min-w-0 h-full">
+            <div
+                ref={messagesContainerRef}
+                className="flex-1 p-4 md:p-6 space-y-6 h-full  overflow-y-auto agentuity-scrollbar"
+                style={{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }}
+            >
+                {session.messages.map((message) => (
+                    <ChatMessageComponent
+                        key={message.id}
+                        message={message}
+                        setEditorContent={setEditorContent}
+                        setEditorOpen={setEditorOpen}
+                    />
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+            <ChatInput loading={false} onSendMessage={(content) => handleSendMessage(content, session.sessionId)} />
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/chat/components/CodeBlock.tsx b/app/chat/components/CodeBlock.tsx
new file mode 100644
index 00000000..8900cb92
--- /dev/null
+++ b/app/chat/components/CodeBlock.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Copy, Check } from 'lucide-react';
+
+interface SimpleCodeBlockProps {
+  content: string;
+  language: string;
+}
+
+export default function CodeBlock({
+  content,
+  language
+}: SimpleCodeBlockProps) {
+  const [code, setCode] = useState(content);
+  const [copied, setCopied] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    setCode(content);
+    // Auto-size the textarea to its content within max height
+    if (textareaRef.current) {
+      const el = textareaRef.current;
+      el.style.height = 'auto';
+      const maxPx = 500;
+      const newHeight = Math.min(el.scrollHeight, maxPx);
+      el.style.height = `${newHeight}px`;
+    }
+  }, [content]);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="agentuity-card-elevated rounded-xl overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between p-2 bg-black/5 dark:bg-black/20 border-b border-black/2 dark:border-white/8">
+        <span className="text-sm text-gray-200">{language}</span>
+        <div className="flex gap-2">
+          <button
+            onClick={copyToClipboard}
+            className="group flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg transition-all duration-200 agentuity-button-primary bg-gradient-to-r from-blue-500/20 to-cyan-500/20 hover:from-blue-500/30 hover:to-cyan-500/30 text-cyan-400 hover:scale-105 active:scale-95"
+          >
+            {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+
+      <textarea
+        ref={textareaRef}
+        value={code}
+        readOnly={true}
+        className="w-full p-4 text-sm font-mono bg-white text-gray-900 dark:bg-transparent dark:text-gray-200 border-0 focus:outline-none focus:ring-0 overflow-x-auto overflow-y-auto leading-relaxed resize-none"
+        style={{ minHeight: '200px', maxHeight: '500px' }}
+        spellCheck={false}
+      />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/chat/components/CodeEditor.tsx b/app/chat/components/CodeEditor.tsx
new file mode 100644
index 00000000..f040a422
--- /dev/null
+++ b/app/chat/components/CodeEditor.tsx
@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Play, Terminal, Square, Power, Code, X } from 'lucide-react';
+
+enum TabType {
+  CODE = 'code',
+  OUTPUT = 'output'
+}
+
+interface CodeEditorProps {
+  executionResult: string | null;
+  serverRunning: boolean;
+  executingFiles: string[];
+  runCode: (code: string) => void;
+  stopServer: () => void;
+  editorContent: string;
+  setEditorContent: (content: string) => void;
+  toggleEditor: () => void;
+}
+
+export function CodeEditor({
+  executionResult,
+  serverRunning,
+  runCode,
+  stopServer,
+  editorContent,
+  setEditorContent,
+  toggleEditor
+}: CodeEditorProps) {
+  const [activeTab, setActiveTab] = useState<TabType>(TabType.CODE);
+
+  const handleEditorContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setEditorContent(e.target.value);
+  };
+
+  const handleRunCode = () => {
+    runCode(editorContent);
+  };
+
+  return (
+    <div className="h-full flex flex-col min-w-[400px] w-full overflow-hidden border-l border-white">
+      {/* Tab Header */}
+      <div className="p-2">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div className="flex items-center gap-2 md:gap-3">
+            {/* Tab Buttons */}
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => setActiveTab(TabType.CODE)}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs md:text-sm font-medium transition-colors ${activeTab === TabType.CODE
+                  ? 'bg-gray-700/50 text-gray-200'
+                  : 'text-gray-400 hover:text-gray-300 hover:bg-white/5'
+                  }`}
+              >
+                <Code className="w-3 h-3" />
+                Code
+              </button>
+              <button
+                onClick={() => setActiveTab(TabType.OUTPUT)}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-xs md:text-sm font-medium transition-colors ${activeTab === TabType.OUTPUT
+                  ? 'bg-gray-700/50 text-gray-200'
+                  : 'text-gray-400 hover:text-gray-300 hover:bg-white/5'
+                  }`}
+              >
+                <Terminal className="w-3 h-3" />
+                Output
+              </button>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 md:gap-2">
+            {serverRunning && (
+              <button
+                onClick={stopServer}
+                className="p-2 bg-red-500/20 text-red-400 rounded-md hover:bg-red-500/30 disabled:opacity-50 transition-colors"
+                aria-label="Stop server"
+                title="Stop Server"
+              >
+                <Square className="w-4 h-4" />
+              </button>
+            )}
+            <button
+              onClick={handleRunCode}
+              disabled={serverRunning}
+              className={`p-2 rounded-md transition-colors ${serverRunning
+                ? 'bg-gray-500/20 text-gray-500 cursor-not-allowed'
+                : 'bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30'
+                }`}
+              aria-label={serverRunning ? 'Server is running' : 'Run code'}
+              title={serverRunning ? 'Server Running' : 'Run Code'}
+            >
+              {serverRunning ? (
+                <Power className="w-4 h-4" />
+              ) : (
+                <Play className="w-4 h-4" />
+              )}
+            </button>
+            <button
+              onClick={toggleEditor}
+              className="p-2 text-gray-400 hover:text-gray-300 hover:bg-white/5 rounded-md transition-colors"
+              aria-label="Close editor"
+              title="Close Editor"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-hidden">
+        {activeTab === TabType.CODE ? (
+          <div className="h-full p-4">
+            <textarea
+              value={editorContent}
+              onChange={handleEditorContentChange}
+              className="w-full h-full bg-gray-900/50 border border-gray-700/50 rounded-lg p-3 text-sm font-mono text-gray-200 resize-none focus:outline-none focus:border-cyan-500/50"
+              placeholder="Enter your code here..."
+              spellCheck={false}
+            />
+          </div>
+        ) : (
+          <div className="h-full p-4">
+            <div className="w-full h-full bg-gray-900/50 border border-gray-700/50 rounded-lg p-3 text-sm font-mono text-gray-200 overflow-auto">
+              {executionResult ? (
+                <pre className="whitespace-pre-wrap">{executionResult}</pre>
+              ) : (
+                <span className="text-gray-400">No output yet. Run some code to see results.</span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/chat/components/MarkdownRenderer.tsx b/app/chat/components/MarkdownRenderer.tsx
new file mode 100644
index 00000000..98958cb2
--- /dev/null
+++ b/app/chat/components/MarkdownRenderer.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import CodeBlock from './CodeBlock';
+
+// Helper functions for markdown processing
+const extractCodeFromChildren = (children: React.ReactNode) => {
+    const codeElement = React.Children.toArray(children)[0] as React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+    const className = codeElement?.props?.className || '';
+    const language = className.replace('language-', '');
+    const code = typeof codeElement?.props?.children === 'string'
+        ? codeElement.props.children
+        : String(codeElement?.props?.children || '');
+
+    return { code, language };
+};
+
+const isExecutableLanguage = (language: string) => {
+    const executableExtensions = ['js', 'javascript', 'py', 'python', 'ts', 'typescript'];
+    return executableExtensions.includes(language);
+};
+
+const getFilenameForLanguage = (language: string) => {
+    switch (language) {
+        case 'py':
+        case 'python':
+            return 'index.py';
+        case 'ts':
+        case 'typescript':
+            return 'agent.ts';
+        default:
+            return 'index.js';
+    }
+};
+
+export function MarkdownRenderer({ content }: { content: string }) {
+    return (
+        <div className="prose prose-sm max-w-none prose-invert text-sm text-gray-200">
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={{
+                    pre: ({ children }) => {
+                        const { code, language } = extractCodeFromChildren(children);
+
+                        if (isExecutableLanguage(language)) {
+                            const filename = getFilenameForLanguage(language);
+
+                            return (
+                                <CodeBlock
+                                    content={code}
+                                    language={language}
+                                />
+                            );
+                        }
+
+                        return (
+                            <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg overflow-x-auto">
+                                <code className={`text-sm language-${language}`}>
+                                    {code}
+                                </code>
+                            </pre>
+                        );
+                    },
+                    code: ({ children, className, ...props }) => {
+                        if (!className) {
+                            return (
+                                <code className="break-words whitespace-pre-wrap bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm" {...props}>
+                                    {children}
+                                </code>
+                            );
+                        }
+                        return <code {...props}>{children}</code>;
+                    }
+                }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/chat/components/SessionSidebar.tsx b/app/chat/components/SessionSidebar.tsx
new file mode 100644
index 00000000..6e8b7e7e
--- /dev/null
+++ b/app/chat/components/SessionSidebar.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Plus,
+  BookAIcon,
+  MessageCircle,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react';
+import { AgentuityLogo } from '@/components/icons/AgentuityLogo';
+import { Session, SessionSidebarProps } from '../types';
+
+// Helper function to format relative dates
+const formatRelativeDate = (date: Date): string => {
+  const now = new Date();
+  const diffInMs = now.getTime() - date.getTime();
+  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+
+  if (diffInDays === 0) return 'Today';
+  if (diffInDays === 1) return 'Yesterday';
+  if (diffInDays < 7) return `${diffInDays} days ago`;
+
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric'
+  });
+};
+
+// Helper function to truncate text with ellipsis
+const truncateText = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+};
+
+export function SessionSidebar({
+  currentSessionId,
+  sessions,
+  onSessionSelect,
+  onNewSession,
+  hasMore,
+  onLoadMore,
+  isLoadingMore
+}: SessionSidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const toggleCollapsed = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const handleSessionClick = (sessionId: string) => {
+    onSessionSelect(sessionId);
+  };
+
+  // Get session display title
+  const getSessionPreview = (session: Session) => {
+    if (session.title && session.title.trim().length > 0) {
+      return session.title.trim();
+    }
+    if (session.messages && session.messages.length > 0) {
+      const firstMessage = session.messages[0];
+      return firstMessage.content || 'New conversation';
+    }
+    return 'New conversation';
+  };
+  const relativeDate = formatRelativeDate(new Date());
+
+  return (
+    <div
+      className={`
+          fixed lg:static inset-y-0 left-0 z-50
+          transform transition-all duration-300 ease-out
+          -translate-x-full lg:translate-x-0
+          ${isCollapsed ? 'w-12 lg:w-12' : 'w-70 lg:w-70'}
+          bg-black/20 backdrop-blur-md border-r border-white/10
+          flex flex-col h-full
+        `}
+    >
+      {/* Header Section */}
+      <div className="p-3 border-b border-white/8">
+        <div className="flex items-center justify-between">
+          {!isCollapsed && (
+            <div className="flex items-center gap-3 min-w-0">
+              <div className="w-8 h-8 bg-cyan-500/10 rounded-lg flex items-center justify-center border border-cyan-500/20">
+                <AgentuityLogo className="w-4 h-4 text-cyan-400" />
+              </div>
+              <div className="min-w-0">
+                <h1 className="text-sm font-semibold text-gray-200 truncate">
+                  Agentuity
+                </h1>
+                <p className="text-xs text-gray-400 truncate">
+                  AI Playground
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Desktop Toggle Button */}
+          <button
+            onClick={toggleCollapsed}
+            className="hidden lg:flex items-center justify-center w-6 h-6 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 transition-colors"
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronLeft className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Action Section */}
+      <div className="p-2 border-b border-white/8">
+        <button
+          onClick={onNewSession}
+          className={`
+              w-full flex items-center gap-3 p-1 rounded-lg
+              bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/20
+              text-cyan-400 hover:text-cyan-300 transition-all duration-200
+              ${isCollapsed ? 'justify-center' : 'justify-start'}
+            `}
+          aria-label="Start new chat"
+        >
+          <Plus className="w-5 h-5 flex-shrink-0" />
+          {!isCollapsed && (
+            <span className="text-sm font-medium">New Chat</span>
+          )}
+        </button>
+      </div>
+
+      {/* Sessions List */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-2 space-y-1">
+            {sessions.map((session: Session) => {
+              const isActive = session.sessionId === currentSessionId;
+              const preview = getSessionPreview(session);
+              const isTutorial = session.isTutorial;
+              // Use current timestamp since we don't have updatedAt anymore
+
+              return (
+                <button
+                  key={session.sessionId}
+                  onClick={() => handleSessionClick(session.sessionId)}
+                  className={`
+                      w-full flex items-center gap-2 p-2 rounded-lg text-left
+                      transition-all duration-200 group
+                      ${isActive
+                      ? 'bg-cyan-500/10 border border-cyan-500/20 text-cyan-400'
+                      : 'hover:bg-white/5 text-gray-300 hover:text-gray-200'
+                    }
+                      ${isCollapsed ? 'justify-center' : 'justify-start'}
+                    `}
+                  aria-label={`Switch to conversation: ${preview}`}
+                  title={isCollapsed ? preview : undefined}
+                >
+                  <div className="flex-shrink-0">
+                    {isTutorial ? (
+                      <BookAIcon className="w-4 h-4" />
+                    ) : (
+                      <MessageCircle className="w-4 h-4" />
+                    )}
+                  </div>
+
+                  {!isCollapsed && (
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between mb-1">
+                        <p className="text-sm font-medium truncate">
+                          {truncateText(preview, 25)}
+                        </p>
+                        <span className="text-xs text-gray-400 flex-shrink-0 ml-2">
+                          {relativeDate}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-gray-500">
+                        <span>{session.messages?.length || 0} messages</span>
+                      </div>
+                    </div>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+      </div>
+
+      {/* Footer Section */}
+      <div className="p-3 border-t border-white/8">
+        {!isCollapsed && (
+          <>
+            {typeof onLoadMore === 'function' && hasMore && (
+              <button
+                onClick={onLoadMore}
+                disabled={isLoadingMore}
+                className="w-full px-2 py-1 text-sm rounded-md bg-white/5 hover:bg-white/10 disabled:opacity-60"
+              >
+                {isLoadingMore ? 'Loading...' : 'Load more'}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/chat/components/SessionSidebarSkeleton.tsx b/app/chat/components/SessionSidebarSkeleton.tsx
new file mode 100644
index 00000000..7377808f
--- /dev/null
+++ b/app/chat/components/SessionSidebarSkeleton.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function SessionSidebarSkeleton() {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  return (
+    <div
+      className={`
+        fixed lg:static inset-y-0 left-0 z-50 
+        transform transition-all duration-300 ease-out
+        -translate-x-full lg:translate-x-0
+        ${isCollapsed ? 'w-12 lg:w-12' : 'w-70 lg:w-70'}
+        bg-black/20 backdrop-blur-md border-r border-white/10
+        flex flex-col h-full
+      `}
+    >
+      {/* Header */}
+      <div className="p-3 border-b border-white/8">
+        <div className="flex items-center justify-between">
+          {!isCollapsed && (
+            <div className="flex items-center gap-3 min-w-0">
+              <Skeleton className="w-8 h-8 rounded-lg" />
+              <div className="min-w-0 space-y-1">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-2 w-20" />
+              </div>
+            </div>
+          )}
+
+          <button
+            onClick={() => setIsCollapsed(v => !v)}
+            className="hidden lg:flex items-center justify-center w-6 h-6 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 transition-colors"
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronLeft className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Action */}
+      <div className="p-2 border-b border-white/8">
+        <button
+          className={`
+            w-full flex items-center gap-3 p-1 rounded-lg
+            bg-white/5 border border-white/10 text-gray-300 cursor-not-allowed
+            ${isCollapsed ? 'justify-center' : 'justify-start'}
+          `}
+          aria-label="Start new chat"
+          disabled
+        >
+          <Plus className="w-5 h-5 flex-shrink-0 opacity-60" />
+          {!isCollapsed && (
+            <span className="text-sm font-medium opacity-60">New Chat</span>
+          )}
+        </button>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto p-2 space-y-1">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className={`
+              w-full flex items-center gap-2 p-2 rounded-lg
+              ${isCollapsed ? 'justify-center' : 'justify-start'}
+            `}
+          >
+            <Skeleton className="w-4 h-4 rounded" />
+            {!isCollapsed && (
+              <div className="flex-1 min-w-0 space-y-2">
+                <div className="flex items-center justify-between">
+                  <Skeleton className="h-3 w-32" />
+                  <Skeleton className="h-2 w-12" />
+                </div>
+                <Skeleton className="h-2 w-24" />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-white/8">
+        {!isCollapsed && (
+          <Skeleton className="h-7 w-full" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default SessionSidebarSkeleton;
diff --git a/app/chat/components/TutorialFileChip.tsx b/app/chat/components/TutorialFileChip.tsx
new file mode 100644
index 00000000..41833ddd
--- /dev/null
+++ b/app/chat/components/TutorialFileChip.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { FileText } from 'lucide-react';
+import { CodeFile } from '../types';
+
+interface TutorialFileChipProps {
+    codeBlock: CodeFile;
+    onOpenInEditor: (code: string) => void;
+}
+
+export function TutorialFileChip({
+    codeBlock,
+    onOpenInEditor,
+}: TutorialFileChipProps) {
+    const onFileClipClicked = () => {
+        onOpenInEditor(codeBlock.content);
+    }
+
+    return (
+        <div className="mt-3 space-y-3">
+            <div className="inline-flex items-center justify-between p-3 bg-gray-800/50 rounded-lg border border-gray-700/50">
+                <button type="button" className="flex items-center gap-3 cursor-pointer" onClick={onFileClipClicked} aria-label={`Open ${codeBlock.filename}`}>
+                    <div className="w-8 h-8 bg-gray-700/50 rounded-lg flex items-center justify-center">
+                        <FileText className="w-4 h-4 text-gray-400" />
+                    </div>
+                    <div>
+                        <div className="text-sm font-medium text-gray-200">{codeBlock.filename}</div>
+                        <div className="text-xs text-gray-400">{codeBlock.language}</div>
+                    </div>
+                </button>
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/app/chat/layout.tsx b/app/chat/layout.tsx
new file mode 100644
index 00000000..e0c5ad29
--- /dev/null
+++ b/app/chat/layout.tsx
@@ -0,0 +1,113 @@
+ 'use client';
+
+import { usePathname, useRouter } from "next/navigation";
+import { Session } from "./types";
+import { sessionService } from "./services/sessionService";
+import { SessionSidebar } from "./components/SessionSidebar";
+ import { SessionSidebarSkeleton } from './components/SessionSidebarSkeleton';
+import { SessionContext } from './SessionContext';
+import useSWRInfinite from 'swr/infinite';
+
+
+
+ export default function ChatLayout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const sessionId = pathname.startsWith('/chat/') ? pathname.split('/chat/')[1] : '';
+
+    const getKey = (pageIndex: number, previousPageData: any) => {
+        if (previousPageData && !previousPageData.pagination?.hasMore) return null;
+        const cursor = previousPageData ? previousPageData.pagination.nextCursor : 0;
+        return ['sessions', cursor];
+    };
+
+    const fetchPage = async ([, cursor]: [string, number]) => {
+        const res = await sessionService.getSessionsPage({ cursor, limit: 10 });
+        if (!res.success || !res.data) throw new Error(res.error || 'Failed to fetch sessions');
+        return res.data;
+    };
+
+    const { data, error, size, setSize, isValidating, mutate: swrMutate } = useSWRInfinite(getKey, fetchPage, {
+        revalidateOnFocus: true,
+        revalidateOnReconnect: true
+    });
+
+    const pages = data || [];
+    // Deduplicate sessions across pages using Map to preserve order and uniqueness
+    const sessionMap = new Map<string, Session>();
+    pages.forEach(page => {
+        page.sessions.forEach(session => {
+            sessionMap.set(session.sessionId, session);
+        });
+    });
+    const sessions: Session[] = Array.from(sessionMap.values());
+
+    const hasMore = pages.length === 0 ? false : (pages[pages.length - 1].pagination?.hasMore ?? false);
+    const isLoading = !data && !error;
+    const isLoadingMore = isValidating;
+
+    const mutate = async (newSessions: Session[], options = { revalidate: false }) => {
+        // When updating sessions, we need to update all pages that might contain the session
+        const updatedPages = pages.map(page => {
+            const updatedPageSessions = page.sessions.map(session => {
+                const updatedSession = newSessions.find(ns => ns.sessionId === session.sessionId);
+                return updatedSession || session;
+            });
+            return { ...page, sessions: updatedPageSessions };
+        });
+
+        await swrMutate(updatedPages, options);
+    };
+
+    const handleSessionSelect = (id: string) => router.push(`/chat/${id}`);
+    const handleNewSession = () => router.push('/chat');
+    const loadMore = () => setSize(size + 1);
+
+    return (
+        <div className="agentuity-background flex h-screen text-white overflow-hidden">
+            {/* Sidebar: show skeleton while loading, real sidebar when ready */}
+            {isLoading ? (
+                <SessionSidebarSkeleton />
+            ) : (
+                <SessionSidebar
+                    currentSessionId={sessionId}
+                    sessions={sessions}
+                    onSessionSelect={handleSessionSelect}
+                    onNewSession={handleNewSession}
+                    hasMore={hasMore}
+                    onLoadMore={loadMore}
+                    isLoadingMore={isLoadingMore}
+                />
+            )}
+            {/* Main Content */}
+            <SessionContext.Provider value={{
+                sessions,
+                setSessions: (updater, options = { revalidate: true }) => {
+                    const newData = typeof updater === 'function' ? (updater as any)(sessions) : updater;
+                    mutate(newData, options);
+                },
+                currentSessionId: sessionId,
+                revalidateSessions: () => swrMutate(undefined, { revalidate: true })
+            }}>
+                <div className="flex-1 flex flex-col min-w-0">
+                    {/* Non-blocking error banner */}
+                    {error && (
+                        <div className="absolute top-2 right-2 z-50 bg-red-500/20 border border-red-500/40 text-red-200 text-sm px-3 py-2 rounded-md backdrop-blur">
+                            <div className="flex items-center gap-3">
+                                <span>Failed to load sessions</span>
+                                <button
+                                    onClick={() => setSize(1)}
+                                    className="px-2 py-0.5 text-xs rounded bg-red-500/30 hover:bg-red-500/40 border border-red-500/50"
+                                >
+                                    Retry
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                    {children}
+                </div>
+            </SessionContext.Provider>
+        </div>
+    );
+}
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
new file mode 100644
index 00000000..8b9793c5
--- /dev/null
+++ b/app/chat/page.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useRouter } from "next/navigation";
+import { ChatInput } from "./components/ChatInput";
+import { v4 as uuidv4 } from 'uuid';
+
+export default function ChatPage() {
+    const router = useRouter();
+
+    const handleMessageSend = (message: string) => {
+        const newSessionId = uuidv4();
+        const trimmed = message.trim();
+        if (trimmed) {
+            sessionStorage.setItem(`initialMessage:${newSessionId}`, trimmed);
+        }
+        router.push(`/chat/${newSessionId}`);
+    };
+
+    return (
+        <div className="flex-1 flex flex-col justify-center items-center">
+            <div className="w-full max-w-3xl px-4">
+                <div className="grid grid-cols-2 gap-4 mb-8">
+                    <RecommendationCard
+                        title="List all tutorials"
+                        subtitle="available in Agentuity."
+                        onClick={() => handleMessageSend("List all tutorials available in Agentuity")}
+                    />
+                    <RecommendationCard
+                        title="How do I do agent handoff"
+                        subtitle="in the Python SDK?"
+                        onClick={() => handleMessageSend("How do I do agent handoff in the Python SDK?")}
+                    />
+                </div>
+                <ChatInput onSendMessage={handleMessageSend} />
+            </div>
+        </div>
+    );
+}
+
+
+interface RecommendationCardProps {
+    title: string;
+    subtitle: string;
+    onClick: () => void;
+}
+
+const RecommendationCard = ({ title, subtitle, onClick }: RecommendationCardProps) => {
+    return (
+        <button
+            onClick={onClick}
+            className="flex flex-col items-start p-3 rounded-lg text-left transition-all duration-200 hover:scale-[1.02] border"
+        >
+            <div className="font-medium text-sm mb-0.5">{title}</div>
+            <div className="text-xs opacity-70">{subtitle}</div>
+        </button>
+    );
+};
\ No newline at end of file
diff --git a/app/chat/services/sessionService.ts b/app/chat/services/sessionService.ts
new file mode 100644
index 00000000..6acfec3c
--- /dev/null
+++ b/app/chat/services/sessionService.ts
@@ -0,0 +1,296 @@
+import { Session, Message, TutorialData } from '../types';
+
+export interface SessionServiceResponse<T = any> {
+  success: boolean;
+  data?: T;
+  error?: string;
+}
+
+export interface SessionsPage {
+  sessions: Session[];
+  pagination: {
+    cursor: number;
+    nextCursor: number | null;
+    hasMore: boolean;
+    total: number;
+    limit: number;
+  };
+}
+
+
+export class SessionService {
+  /**
+   * Get a page of sessions
+   */
+  async getSessionsPage(params: { cursor?: number; limit?: number } = {}): Promise<SessionServiceResponse<SessionsPage>> {
+    const { cursor = 0, limit = 10 } = params;
+    try {
+      const response = await fetch(`/api/sessions?cursor=${cursor}&limit=${limit}`);
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || `Failed to fetch sessions: ${response.status}`
+        };
+      }
+
+      return {
+        success: true,
+        data: {
+          sessions: data.sessions || [],
+          pagination: data.pagination || { cursor, nextCursor: null, hasMore: false, total: 0, limit }
+        }
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Get all sessions from API (first page fallback)
+   */
+  async getAllSessions(): Promise<SessionServiceResponse<Session[]>> {
+    try {
+      const response = await fetch('/api/sessions');
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || `Failed to fetch sessions: ${response.status}`
+        };
+      }
+      return {
+        success: true,
+        data: data.sessions || []
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Get a specific session by ID
+   */
+  async getSession(sessionId: string): Promise<SessionServiceResponse<Session>> {
+    try {
+      const response = await fetch(`/api/sessions/${sessionId}`);
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || 'Session not found'
+        };
+      }
+
+      return {
+        success: true,
+        data: data.session
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Create a new session
+   */
+  async createSession(session: Session): Promise<SessionServiceResponse<Session>> {
+    try {
+      const response = await fetch('/api/sessions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(session)
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || 'Failed to create session'
+        };
+      }
+
+      return {
+        success: true,
+        data: data.session
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Update an existing session
+   */
+  async updateSession(session: Session): Promise<SessionServiceResponse<Session>> {
+    try {
+      const response = await fetch(`/api/sessions/${session.sessionId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(session)
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || 'Failed to update session'
+        };
+      }
+
+      return {
+        success: true,
+        data: data.session
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Delete a session
+   */
+  async deleteSession(sessionId: string): Promise<SessionServiceResponse<void>> {
+    try {
+      const response = await fetch(`/api/sessions/${sessionId}`, {
+        method: 'DELETE'
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || 'Failed to delete session'
+        };
+      }
+
+      return {
+        success: true
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred'
+      };
+    }
+  }
+
+  /**
+   * Add a message to a session with streaming response support
+   */
+  async addMessageToSessionStreaming(
+    sessionId: string,
+    message: Message,
+    callbacks: {
+      onTextDelta?: (text: string) => void,
+      onTutorialData?: (tutorialData: TutorialData) => void,
+      onFinish?: (session: Session) => void,
+      onError?: (error: string) => void
+    }
+  ): Promise<void> {
+    try {
+      const response = await fetch(`/api/sessions/${sessionId}/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ message })
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        callbacks.onError?.(errorData.error || `Error: ${response.status}`);
+        return;
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        callbacks.onError?.('No response body available');
+        return;
+      }
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+
+        // Process complete lines
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || ''; // Keep the last incomplete line in buffer
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            try {
+              const data = JSON.parse(line.slice(6));
+
+              if (data.type === 'text-delta' && data.textDelta) {
+                callbacks.onTextDelta?.(data.textDelta);
+              } else if (data.type === 'tutorial-data' && data.tutorialData) {
+                callbacks.onTutorialData?.(data.tutorialData);
+              } else if (data.type === 'finish' && data.session) {
+                callbacks.onFinish?.(data.session);
+              }
+            } catch (error) {
+              console.error('Error parsing SSE data:', error);
+            }
+          }
+        }
+      }
+
+      // Process any remaining data
+      if (buffer.length > 0) {
+        const lines = buffer.split('\n');
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.type === 'text-delta' && data.textDelta) {
+                callbacks.onTextDelta?.(data.textDelta);
+              } else if (data.type === 'tutorial-data' && data.tutorialData) {
+                callbacks.onTutorialData?.(data.tutorialData);
+              } else if (data.type === 'finish' && data.session) {
+                callbacks.onFinish?.(data.session);
+              }
+            } catch (error) {
+              console.error('Error parsing SSE data:', error);
+            }
+          }
+        }
+      }
+    } catch (error) {
+      callbacks.onError?.(error instanceof Error ? error.message : 'Unknown error occurred');
+    }
+  }
+}
+
+// Export singleton instance
+export const sessionService = new SessionService();
\ No newline at end of file
diff --git a/app/chat/types.ts b/app/chat/types.ts
new file mode 100644
index 00000000..cda91db4
--- /dev/null
+++ b/app/chat/types.ts
@@ -0,0 +1,101 @@
+import { z } from 'zod';
+
+export const TutorialSnippetSchema = z.object({
+  path: z.string(),
+  lang: z.string().optional(),
+  from: z.number().int().optional(),
+  to: z.number().int().optional(),
+  title: z.string().optional(),
+  content: z.string()
+});
+
+export type TutorialSnippet = z.infer<typeof TutorialSnippetSchema>;
+
+export const TutorialDataSchema = z.object({
+  tutorialId: z.string(),
+  totalSteps: z.number().int().min(1),
+  currentStep: z.number().int().min(0),
+  tutorialStep: z.object({
+    title: z.string(),
+    mdx: z.string(),
+    snippets: z.array(TutorialSnippetSchema),
+    codeContent: z.string().optional(),
+    totalSteps: z.number().int().min(1)
+  })
+});
+
+export type TutorialData = z.infer<typeof TutorialDataSchema>;
+
+export const MessageSchema = z.object({
+  id: z.string().min(1),
+  author: z.enum(['USER', 'ASSISTANT']),
+  content: z.string(),
+  timestamp: z.string(),
+  tutorialData: TutorialDataSchema.optional()
+});
+
+export type Message = z.infer<typeof MessageSchema>;
+
+export const CodeFileSchema = z.object({
+  filename: z.string(),
+  content: z.string(),
+  language: z.string()
+});
+
+export type CodeFile = z.infer<typeof CodeFileSchema>;
+
+export const SessionSchema = z.object({
+  messages: z.array(MessageSchema),
+  sessionId: z.string().min(1),
+  isTutorial: z.boolean().optional(),
+  title: z.string().optional()
+});
+
+export type Session = z.infer<typeof SessionSchema>;
+
+export interface SessionSidebarProps {
+  currentSessionId: string;
+  sessions: Session[];
+  onSessionSelect: (sessionId: string) => void;
+  onNewSession: () => void;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  isLoadingMore?: boolean;
+}
+
+export const ExecuteRequestSchema = z.object({
+  code: z.string().min(1),
+  filename: z.string().min(1),
+  sessionId: z.string().min(1)
+});
+
+export type ExecuteRequest = z.infer<typeof ExecuteRequestSchema>;
+
+export const StreamingChunkSchema = z.object({
+  type: z.enum(['text-delta', 'status', 'tutorial-data', 'error', 'finish']),
+  textDelta: z.string().optional(),
+  message: z.string().optional(),
+  category: z.string().optional(),
+  tutorialData: TutorialDataSchema.optional(),
+  error: z.string().optional(),
+  details: z.string().optional()
+});
+
+export type StreamingChunk = z.infer<typeof StreamingChunkSchema>;
+
+// // Agent request type
+// export interface AgentStreamingRequest {
+//   message: string;
+//   conversationHistory: Message[];
+//   tutorialData?: TutorialData;
+// }
+
+// export interface ChatMessageProps {
+//   message: Message;
+//   onCodeExecute: (code: string, filename: string) => Promise<void>;
+//   onCodeChange: (code: string, filename: string) => void;
+//   executionState: ExecutionState;
+// }
+
+// export type ExecutionState = 'idle' | 'running' | 'completed' | 'error';
+
diff --git a/app/chat/utils/dateUtils.ts b/app/chat/utils/dateUtils.ts
new file mode 100644
index 00000000..4e60f6c5
--- /dev/null
+++ b/app/chat/utils/dateUtils.ts
@@ -0,0 +1,37 @@
+/**
+ * Utility functions for working with dates in the chat application
+ */
+
+/**
+ * Converts a Date object or timestamp string to ISO string format
+ * @param date Date object or string to convert
+ * @returns ISO string representation
+ */
+export function toISOString(date: Date | string | number): string {
+  const dateObj = date instanceof Date ? date : new Date(date);
+  if (Number.isNaN(dateObj.getTime())) {
+    return new Date().toISOString();
+  }
+  return dateObj.toISOString();
+}
+
+/**
+ * Formats a timestamp for display in the UI
+ * @param timestamp ISO string timestamp
+ * @param options Formatting options
+ * @returns Formatted time string
+ */
+export function formatTime(
+  timestamp: string,
+  options: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' }
+): string {
+  return new Date(timestamp).toLocaleTimeString([], options);
+}
+
+/**
+ * Creates a current timestamp in ISO format
+ * @returns Current time as ISO string
+ */
+export function getCurrentTimestamp(): string {
+  return new Date().toISOString();
+}
\ No newline at end of file
diff --git a/app/chat/utils/useAutoResize.ts b/app/chat/utils/useAutoResize.ts
new file mode 100644
index 00000000..7f30e438
--- /dev/null
+++ b/app/chat/utils/useAutoResize.ts
@@ -0,0 +1,45 @@
+import { useRef, useLayoutEffect, useCallback } from 'react';
+
+interface UseAutoResizeOptions {
+  maxHeight?: number;
+  minHeight?: number;
+}
+
+export function useAutoResize(
+  content: string,
+  options: UseAutoResizeOptions = {}
+) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { maxHeight, minHeight = 0 } = options;
+
+  const resizeTextarea = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // Run the measurement in the next animation frame
+    // so layout has already been updated (e.g. max-height 150 px
+    // after exiting fullscreen).
+    requestAnimationFrame(() => {
+      // Reset, then measure
+      textarea.style.height = 'auto';
+
+      let newHeight = textarea.scrollHeight;
+      if (maxHeight !== undefined) newHeight = Math.min(newHeight, maxHeight);
+      if (minHeight) newHeight = Math.max(newHeight, minHeight);
+
+      textarea.style.height = `${newHeight}px`;
+    });
+  }, [maxHeight, minHeight]);
+
+  useLayoutEffect(() => {
+    resizeTextarea();
+  }, [content, resizeTextarea]);
+
+  // Return an object that can be used as a ref but also has additional methods
+  return {
+    textareaRef,
+    triggerResize: resizeTextarea,
+    // For backward compatibility, allow this to be used as a ref directly
+    current: textareaRef.current
+  };
+} 
\ No newline at end of file
diff --git a/app/chat/utils/useStreaming.ts b/app/chat/utils/useStreaming.ts
new file mode 100644
index 00000000..b4a324cd
--- /dev/null
+++ b/app/chat/utils/useStreaming.ts
@@ -0,0 +1,209 @@
+import { useState, useCallback } from 'react';
+import { Message, TutorialData, StreamingChunk } from '../types';
+import { getCurrentTimestamp } from './dateUtils';
+
+// Generate unique IDs
+const generateId = () => {
+  return typeof crypto !== 'undefined' && crypto.randomUUID
+    ? crypto.randomUUID()
+    : Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
+
+interface UseStreamingProps {
+  messages: Message[];
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  setTutorialData: React.Dispatch<React.SetStateAction<TutorialData | undefined>>;
+  setEditorOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setEditorContent: React.Dispatch<React.SetStateAction<string>>;
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function useStreaming({
+  messages,
+  setMessages,
+  setTutorialData,
+  setEditorOpen,
+  setEditorContent,
+  setLoading
+}: UseStreamingProps) {
+  const [status, setStatus] = useState<string | null>(null);
+
+  const sendMessage = useCallback(async (content: string, sessionId: string, tutorialData?: TutorialData) => {
+    if (!content.trim() || !sessionId) return;
+    const userMessage: Message = {
+      id: generateId(),
+      author: 'USER',
+      content,
+      timestamp: getCurrentTimestamp(),
+      tutorialData
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setLoading(true);
+
+    // Create assistant message placeholder
+    const assistantMessage: Message = {
+      id: generateId(),
+      author: 'ASSISTANT',
+      content: '',
+      timestamp: getCurrentTimestamp(),
+    };
+
+    setMessages(prev => [...prev, assistantMessage]);
+
+    try {
+      // Send to the enhanced messages endpoint
+      const response = await fetch(`/api/sessions/${sessionId}/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: userMessage,
+          processWithAgent: true
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send message');
+      }
+
+      // Handle streaming response
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      let accumulatedContent = '';
+      let finalTutorialData: TutorialData | undefined = undefined;
+
+      if (!reader) {
+        throw new Error('No response body');
+      }
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split('\n');
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            try {
+              const data: StreamingChunk = JSON.parse(line.slice(6));
+
+              switch (data.type) {
+                case 'text-delta':
+                  if (data.textDelta) {
+                    accumulatedContent += data.textDelta;
+                    // Update the assistant message content in real-time
+                    setMessages(prev => {
+                      const updated = prev.map(msg =>
+                        msg.id === assistantMessage.id
+                          ? { ...msg, content: accumulatedContent }
+                          : msg
+                      );
+                      return updated;
+                    });
+                  }
+                  break;
+
+                case 'status':
+                  if (data.message) {
+                    setStatus(data.message);
+
+                    // Update the assistant message to show the status
+                    setMessages(prev =>
+                      prev.map(msg =>
+                        msg.id === assistantMessage.id
+                          ? {
+                            ...msg,
+                            content: accumulatedContent + (accumulatedContent ? '\n\n' : '') + `🔄 ${data.message}`
+                          }
+                          : msg
+                      )
+                    );
+                  }
+                  break;
+
+                case 'tutorial-data':
+                  if (data.tutorialData) {
+                    finalTutorialData = data.tutorialData;
+                  }
+                  break;
+
+                case 'error':
+                  throw new Error(data.error || 'Unknown error occurred');
+
+                case 'finish':
+                  // Stream completed successfully
+                  setStatus(null); // Clear status when stream finishes
+                  // Remove any status message from the final content
+                  setMessages(prev =>
+                    prev.map(msg =>
+                      msg.id === assistantMessage.id
+                        ? { ...msg, content: accumulatedContent }
+                        : msg
+                    )
+                  );
+                  break;
+              }
+            } catch (error) {
+              console.error('Failed to parse line:', line, error);
+              // Fallback: treat unparseable content as text
+              if (line.startsWith('data: ')) {
+                const rawContent = line.slice(6);
+                accumulatedContent += rawContent;
+                setMessages(prev =>
+                  prev.map(msg =>
+                    msg.id === assistantMessage.id
+                      ? { ...msg, content: accumulatedContent }
+                      : msg
+                  )
+                );
+              }
+            }
+          }
+        }
+      }
+
+      // Update tutorial data if present
+      if (finalTutorialData) {
+        setTutorialData(finalTutorialData);
+
+        // Add tutorial data to the assistant message
+        setMessages(prev =>
+          prev.map(msg =>
+            msg.id === assistantMessage.id
+              ? {
+                ...msg,
+                tutorialData: finalTutorialData
+              }
+              : msg
+          )
+        );
+
+        // Auto-open editor for tutorial steps with code
+        setEditorOpen(true);
+        setEditorContent(finalTutorialData.tutorialStep?.codeContent || '');
+      }
+
+    } catch (error) {
+      console.error('Error sending message:', error);
+      // Update the assistant message with error
+      setMessages(prev =>
+        prev.map(msg =>
+          msg.id === assistantMessage.id
+            ? { ...msg, content: 'Sorry, I encountered an error. Please try again.' }
+            : msg
+        )
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [messages, setMessages, setTutorialData, setEditorOpen, setEditorContent, setLoading]);
+
+  return {
+    sendMessage,
+    status,
+    clearStatus: () => setStatus(null)
+  };
+}
\ No newline at end of file
diff --git a/components/CodeFromFiles.tsx b/components/CodeFromFiles.tsx
new file mode 100644
index 00000000..a3f97467
--- /dev/null
+++ b/components/CodeFromFiles.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { readFile } from 'fs/promises';
+import path from 'path';
+import CodeBlock from '@/app/chat/components/CodeBlock';
+import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
+
+export interface CodeFromFilesSnippet {
+  path: string; // repo-root-relative, e.g. "/examples/poc-tutorial/src/agent.ts"
+  lang?: string; // e.g. "ts", "py"
+  from?: number; // 1-based
+  to?: number;   // inclusive
+  title?: string; // tab label; defaults to basename or lang
+}
+
+interface CodeFromFilesProps {
+  snippets: CodeFromFilesSnippet[];
+  title?: string;
+}
+
+function inferLanguageFromExtension(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+  switch (ext) {
+    case '.ts': return 'ts';
+    case '.tsx': return 'tsx';
+    case '.js': return 'js';
+    case '.jsx': return 'jsx';
+    case '.json': return 'json';
+    case '.py': return 'python';
+    case '.sh':
+    case '.bash': return 'bash';
+    case '.yml':
+    case '.yaml': return 'yaml';
+    default: return '';
+  }
+}
+
+export default async function CodeFromFiles(props: CodeFromFilesProps) {
+  const { title, snippets } = props;
+
+  if (!Array.isArray(snippets) || snippets.length === 0) {
+    return null;
+  }
+
+  const repoRoot = process.cwd();
+
+  const loaded = await Promise.all(
+    snippets.map(async (s) => {
+      if (!s.path.startsWith('/')) {
+        throw new Error('CodeFromFiles: each snippet.path must start with "/" (repo-root-relative)');
+      }
+      const absolutePath = path.resolve(repoRoot, `.${s.path}`);
+      if (!absolutePath.startsWith(repoRoot)) {
+        throw new Error('CodeFromFiles: resolved path escapes repository root');
+      }
+      let fileContent = '';
+      try {
+        fileContent = await readFile(absolutePath, 'utf-8');
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return {
+          label: s.title || path.basename(s.path) || s.lang || 'code',
+          lang: s.lang || inferLanguageFromExtension(s.path) || 'text',
+          content: `// Failed to load ${s.path}: ${message}`,
+        };
+      }
+      const lines = fileContent.split(/\r?\n/);
+      const startIdx = Math.max(0, (s.from ? s.from - 1 : 0));
+      const endIdx = Math.min(lines.length, s.to ? s.to : lines.length);
+      const sliced = lines.slice(startIdx, endIdx).join('\n');
+      return {
+        label: s.title || path.basename(s.path) || s.lang || 'code',
+        lang: s.lang || inferLanguageFromExtension(s.path) || 'text',
+        content: sliced,
+      };
+    })
+  );
+
+  return (
+    <div className="not-prose">
+      {title ? <div className="mb-2 text-sm text-fd-muted-foreground">{title}</div> : null}
+      <Tabs items={loaded.map((x) => x.label)}>
+        {loaded.map((x, idx) => (
+          <Tab key={idx} value={x.label}>
+            <CodeBlock content={x.content} language={x.lang} />
+          </Tab>
+        ))}
+      </Tabs>
+    </div>
+  );
+}
+
+
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 00000000..27f9da87
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import * as React from "react";
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function Skeleton({ className = "", ...props }: SkeletonProps) {
+  return (
+    <div
+      className={`animate-pulse rounded-md bg-white/10 ${className}`}
+      {...props}
+    />
+  );
+}
+
+export default Skeleton;
diff --git a/lib/config.ts b/lib/config.ts
new file mode 100644
index 00000000..b329b851
--- /dev/null
+++ b/lib/config.ts
@@ -0,0 +1,12 @@
+/**
+ * Application configuration
+ * Contains non-secret configuration values
+ */
+
+export const config = {
+    baseUrl: 'https://api.agentuity.com',
+    defaultStoreName: 'chat-sessions',
+    agentBaseUrl: process.env.AGENT_BASE_URL || 'https://agentuity.ai/api',
+    agentQaId: '9ccc5545e93644bd9d7954e632a55a61',
+    agentPulseId: 'ddcb59aa4473f1323be5d9f5fb62b74e'
+} as const;
diff --git a/lib/env.ts b/lib/env.ts
index 93ed044e..bd3b8069 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -2,55 +2,65 @@
  * Environment variable validation and configuration utility
  */
 export interface AgentConfig {
-	url: string;
-	bearerToken?: string;
+  url: string;
+  bearerToken?: string;
 }
-
 /**
- * Validates and returns agent configuration from environment variables
+ * Builds agent configuration using non-secret IDs from config
  */
-export const getAgentConfig = (): AgentConfig => {
-	const baseUrl = process.env.AGENT_BASE_URL;
-	const agentId = process.env.AGENT_ID;
-	const bearerToken = process.env.AGENT_BEARER_TOKEN;
-	const fullUrl = process.env.AGENT_FULL_URL;
+import { config } from '@/lib/config';
+
+const buildAgentConfig = (agentId: string): AgentConfig => {
+  const baseUrl = config.agentBaseUrl;
+  const bearerToken = process.env.AGENT_BEARER_TOKEN;
+
+  if (!baseUrl) {
+    throw new Error(
+      'Missing required configuration. Set AGENT_BASE_URL or ensure config.agentBaseUrl is defined.'
+    );
+  }
+  if (!agentId) {
+    throw new Error('Missing required agent ID in config');
+  }
 
-	// Validate required environment variables
-	if (!fullUrl && (!baseUrl || !agentId)) {
-		throw new Error(
-			'Missing required environment variables. Either set AGENT_FULL_URL or both AGENT_BASE_URL and AGENT_ID'
-		);
-	}
+  // For localhost/127.0.0.1, ensure agent ID has 'agent_' prefix
+  let finalAgentId = agentId;
+  if (baseUrl.includes('127.0.0.1') || baseUrl.includes('localhost')) {
+    if (!agentId.startsWith('agent_')) {
+      finalAgentId = `agent_${agentId}`;
+    }
+  }
 
-	const url = fullUrl || `${baseUrl}/${agentId}`;
+  return {
+    url: `${baseUrl}/${finalAgentId}`,
+    bearerToken: bearerToken || undefined,
+  };
+};
+
+export const getAgentQaConfig = (): AgentConfig => {
+  return buildAgentConfig(config.agentQaId);
+};
 
-	return {
-		url,
-		bearerToken: bearerToken || undefined,
-	};
+export const getAgentPulseConfig = (): AgentConfig => {
+  return buildAgentConfig(config.agentPulseId);
 };
 
 /**
  * Validates environment variables at startup
  */
 export const validateEnv = (): boolean => {
-	try {
-		const config = getAgentConfig();
-		console.log('✓ Environment variables validated');
-		console.log('✓ Agent URL:', config.url);
-		console.log(
-			'✓ Bearer token:',
-			config.bearerToken ? 'configured' : 'Not Set'
-		);
-		return true;
-	} catch (error) {
-		console.error('❌ Environment validation failed:', error);
-		console.error('💡 Make sure to set either:');
-		console.error('   - AGENT_FULL_URL, or');
-		console.error('   - Both AGENT_BASE_URL and AGENT_ID');
-		console.error('💡 Optionally set AGENT_BEARER_TOKEN for authentication');
-		return false;
-	}
+  try {
+    getAgentQaConfig();
+    console.log('✓ Environment variables validated');
+    return true;
+  } catch (error) {
+    console.error('❌ Environment validation failed:', error);
+    console.error('💡 Make sure to set base URL via:');
+    console.error('   - AGENT_BASE_URL env var, or');
+    console.error('   - Use default from config.baseUrl');
+    console.error('💡 Optionally set AGENT_BEARER_TOKEN for authentication');
+    return false;
+  }
 };
 
 /**
@@ -58,10 +68,8 @@ export const validateEnv = (): boolean => {
  * Use .env.local for development and .env.production for production
  */
 declare global {
-	interface ProcessEnv {
-		AGENT_BASE_URL?: string;
-		AGENT_ID?: string;
-		AGENT_BEARER_TOKEN?: string;
-		AGENT_FULL_URL?: string;
-	}
+  interface ProcessEnv {
+    AGENT_BASE_URL?: string;
+    AGENT_BEARER_TOKEN?: string;
+  }
 }
diff --git a/lib/kv-store.ts b/lib/kv-store.ts
new file mode 100644
index 00000000..ca6cbdaf
--- /dev/null
+++ b/lib/kv-store.ts
@@ -0,0 +1,288 @@
+/**
+ * KV Store utility functions for Agentuity
+ * Handles communication with the Agentuity KV store API
+ */
+
+import { config } from './config';
+
+// Types
+export interface KVStoreOptions {
+  storeName?: string;
+}
+
+export interface KVStoreResponse<T = any> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  statusCode?: number;
+}
+
+/**
+ * Shared validation function for KV store operations
+ */
+function validateKVRequest(key: string): KVStoreResponse | null {
+  if (!key) {
+    return {
+      success: false,
+      error: 'Key parameter is required'
+    };
+  }
+
+  if (!process.env.AGENTUITY_API_KEY) {
+    return {
+      success: false,
+      error: 'AGENTUITY_API_KEY environment variable is required'
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Retrieve a value from the KV store
+ * @param key - The key to retrieve
+ * @param options - Optional configuration
+ * @returns Promise<KVStoreResponse<T>>
+ */
+export async function getKVValue<T = any>(
+  key: string,
+  options: KVStoreOptions = {}
+): Promise<KVStoreResponse<T>> {
+  const { storeName } = options;
+  const finalStoreName = storeName || config.defaultStoreName;
+
+  // Validate required parameters
+  const validationError = validateKVRequest(key);
+  if (validationError) {
+    return validationError;
+  }
+
+  try {
+    const url = `${config.baseUrl}/sdk/kv/${encodeURIComponent(finalStoreName)}/${encodeURIComponent(key)}`;
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${process.env.AGENTUITY_API_KEY}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'Next.js KV Client'
+      }
+    });
+
+    if (response.status === 404) {
+      return {
+        success: false,
+        error: `Key '${key}' not found in store '${finalStoreName}'`,
+        statusCode: 404
+      };
+    }
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `HTTP ${response.status}: ${errorText}`,
+        statusCode: response.status
+      };
+    }
+
+    const data = await response.text();
+
+    try {
+      const jsonData = JSON.parse(data) as T;
+      return {
+        success: true,
+        data: jsonData,
+        statusCode: response.status
+      };
+    } catch (parseError) {
+      // Return raw data if JSON parsing fails
+      return {
+        success: true,
+        data: data as T,
+        statusCode: response.status
+      };
+    }
+
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred'
+    };
+  }
+}
+
+/**
+ * Set a value in the KV store
+ * @param key - The key to set
+ * @param value - The value to store
+ * @param options - Optional configuration including TTL
+ * @returns Promise<KVStoreResponse>
+ */
+export async function setKVValue(
+  key: string,
+  value: any,
+  options: KVStoreOptions & { ttl?: number } = {}
+): Promise<KVStoreResponse> {
+  const { storeName, ttl } = options;
+  const finalStoreName = storeName || config.defaultStoreName;
+
+  // Validate required parameters
+  const validationError = validateKVRequest(key);
+  if (validationError) {
+    return validationError;
+  }
+
+  try {
+    const ttlStr = ttl ? `/${ttl}` : '';
+    const url = `${config.baseUrl}/sdk/kv/${encodeURIComponent(finalStoreName)}/${encodeURIComponent(key)}${ttlStr}`;
+
+    const response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Authorization': `Bearer ${process.env.AGENTUITY_API_KEY}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'Next.js KV Client'
+      },
+      body: JSON.stringify(value)
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `HTTP ${response.status}: ${errorText}`,
+        statusCode: response.status
+      };
+    }
+
+    return {
+      success: true,
+      statusCode: response.status
+    };
+
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred'
+    };
+  }
+}
+
+/**
+ * Delete a value from the KV store
+ * @param key - The key to delete
+ * @param options - Optional configuration
+ * @returns Promise<KVStoreResponse>
+ */
+export async function deleteKVValue(
+  key: string,
+  options: KVStoreOptions = {}
+): Promise<KVStoreResponse> {
+  const { storeName } = options;
+  const finalStoreName = storeName || config.defaultStoreName;
+
+  // Validate required parameters
+  const validationError = validateKVRequest(key);
+  if (validationError) {
+    return validationError;
+  }
+
+  try {
+    const url = `${config.baseUrl}/sdk/kv/${encodeURIComponent(finalStoreName)}/${encodeURIComponent(key)}`;
+
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${process.env.AGENTUITY_API_KEY}`,
+        'User-Agent': 'Next.js KV Client'
+      }
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `HTTP ${response.status}: ${errorText}`,
+        statusCode: response.status
+      };
+    }
+
+    return {
+      success: true,
+      statusCode: response.status
+    };
+
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred'
+    };
+  }
+}
+
+/**
+ * Search for keys in the KV store by keyword pattern
+ * @param keyword - The keyword pattern to search for
+ * @param options - Optional configuration
+ * @returns Promise<KVStoreResponse<Array<{key: string, value: any, metadata?: any}>>>
+ */
+export async function searchKVByKeyword<T = any>(
+  keyword: string,
+  options: KVStoreOptions = {}
+): Promise<KVStoreResponse<Array<{key: string, value: T, metadata?: any}>>> {
+  const { storeName } = options;
+  const finalStoreName = storeName || config.defaultStoreName;
+
+  // Validate API key
+  if (!process.env.AGENTUITY_API_KEY) {
+    return {
+      success: false,
+      error: 'AGENTUITY_API_KEY environment variable is required'
+    };
+  }
+
+  try {
+    const url = `${config.baseUrl}/sdk/kv/search/${encodeURIComponent(finalStoreName)}/${encodeURIComponent(keyword)}`;
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${process.env.AGENTUITY_API_KEY}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'Next.js KV Client'
+      }
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `HTTP ${response.status}: ${errorText}`,
+        statusCode: response.status
+      };
+    }
+
+    const data = await response.text();
+
+    try {
+      const jsonData = JSON.parse(data);
+      return {
+        success: true,
+        data: jsonData,
+        statusCode: response.status
+      };
+    } catch (parseError) {
+      return {
+        success: false,
+        error: 'Failed to parse search results as JSON',
+        statusCode: response.status
+      };
+    }
+
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred'
+    };
+  }
+} 
\ No newline at end of file
diff --git a/lib/tutorial/all-tutorials-reader.ts b/lib/tutorial/all-tutorials-reader.ts
new file mode 100644
index 00000000..80d0520a
--- /dev/null
+++ b/lib/tutorial/all-tutorials-reader.ts
@@ -0,0 +1,77 @@
+import { readdir } from "fs/promises";
+import { join } from "path";
+import { readTutorial, type Tutorial } from "./tutorial-reader";
+
+/**
+ * Tutorial with its path information
+ */
+export interface TutorialWithPath extends Tutorial {
+  path: string;
+  directoryName: string; // directory name for reference
+}
+
+/**
+ * Reads all tutorials from a given base directory
+ * Each tutorial should be in its own directory with a 'content' subdirectory
+ */
+export async function readAllTutorials(basePath: string): Promise<TutorialWithPath[]> {
+  try {
+    const entries = await readdir(basePath, { withFileTypes: true });
+    const tutorialDirs = entries.filter(entry => entry.isDirectory());
+
+    const tutorials: TutorialWithPath[] = [];
+
+    for (const tutorialDir of tutorialDirs) {
+      try {
+        const tutorialPath = join(basePath, tutorialDir.name);
+        const contentPath = join(tutorialPath, "content");
+
+        // Check if content directory exists by trying to read it
+        try {
+          await readdir(contentPath);
+        } catch {
+          // Skip directories that don't have a content subdirectory
+          continue;
+        }
+
+        // Read the tutorial using our tutorial reader
+        const tutorial = await readTutorial(contentPath);
+
+        tutorials.push({
+          ...tutorial,
+          path: tutorialPath,
+          directoryName: tutorialDir.name
+        });
+
+      } catch (error) {
+        console.warn(`Failed to read tutorial from ${tutorialDir.name}:`, error);
+      }
+    }
+
+    return tutorials;
+  } catch (error) {
+    throw new Error(`Failed to read tutorials from ${basePath}: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * Reads a specific tutorial by ID
+ */
+export async function readTutorialById(basePath: string, tutorialId: string): Promise<TutorialWithPath | null> {
+  try {
+    const tutorialPath = join(basePath, tutorialId);
+    const contentPath = join(tutorialPath, "content");
+
+    const tutorial = await readTutorial(contentPath);
+
+    return {
+      ...tutorial,
+      path: tutorialPath,
+      directoryName: tutorialId
+    };
+  } catch (error) {
+    console.warn(`Failed to read tutorial ${tutorialId}:`, error);
+    return null;
+  }
+}
+
diff --git a/lib/tutorial/index.ts b/lib/tutorial/index.ts
new file mode 100644
index 00000000..ff0ffffd
--- /dev/null
+++ b/lib/tutorial/index.ts
@@ -0,0 +1,3 @@
+// Tutorial state management exports
+export * from './types';
+export * from './state-manager';
diff --git a/lib/tutorial/state-manager.ts b/lib/tutorial/state-manager.ts
new file mode 100644
index 00000000..0cf04401
--- /dev/null
+++ b/lib/tutorial/state-manager.ts
@@ -0,0 +1,121 @@
+import { getKVValue, setKVValue } from "@/lib/kv-store";
+import { config } from '../config';
+import type { UserTutorialState, TutorialProgress, TutorialState } from './types';
+
+export class TutorialStateManager {
+  private static getTutorialKey(userId: string): string {
+    return `tutorial_state_${userId}`;
+  }
+
+  /**
+   * Get the complete tutorial state for a user
+   */
+  static async getUserTutorialState(userId: string): Promise<UserTutorialState> {
+    const key = this.getTutorialKey(userId);
+    const response = await getKVValue<UserTutorialState>(key, {
+      storeName: config.defaultStoreName
+    });
+
+    return response.success && response.data ? response.data : {
+      userId,
+      tutorials: {}
+    };
+  }
+
+  /**
+   * Update tutorial progress for a user
+   */
+  static async updateTutorialProgress(
+    userId: string,
+    tutorialId: string,
+    currentStep: number,
+    totalSteps: number
+  ): Promise<void> {
+    const state = await this.getUserTutorialState(userId);
+
+    const existing = state.tutorials[tutorialId];
+    const now = new Date().toISOString();
+
+    state.tutorials[tutorialId] = {
+      tutorialId,
+      currentStep,
+      totalSteps,
+      startedAt: existing?.startedAt || now,
+      lastAccessedAt: now,
+      ...(currentStep >= totalSteps ? { completedAt: now } : {})
+    };
+
+    const key = this.getTutorialKey(userId);
+    try {
+      await setKVValue(key, state, { storeName: config.defaultStoreName });
+    } catch (error) {
+      console.error(
+        `Failed to update tutorial state. UserId: ${userId}, Error details:`,
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  }
+
+  /**
+   * Get the current active tutorial state for agent communication
+   * Returns the most recently accessed tutorial
+   */
+  static async getCurrentTutorialState(userId: string): Promise<TutorialState | null> {
+    const state = await this.getUserTutorialState(userId);
+
+    const tutorials = Object.values(state.tutorials);
+    if (tutorials.length === 0) return null;
+
+    // Find the most recently accessed tutorial that's not completed
+    const activeTutorials = tutorials.filter(t => !t.completedAt);
+    if (activeTutorials.length === 0) return null;
+
+    const mostRecent = activeTutorials.reduce((latest, current) =>
+      new Date(current.lastAccessedAt) > new Date(latest.lastAccessedAt) ? current : latest
+    );
+
+    return {
+      tutorialId: mostRecent.tutorialId,
+      currentStep: mostRecent.currentStep
+    };
+  }
+
+  /**
+   * Get tutorial progress for a specific tutorial
+   */
+  static async getTutorialProgress(userId: string, tutorialId: string): Promise<TutorialProgress | null> {
+    const state = await this.getUserTutorialState(userId);
+    return state.tutorials[tutorialId] || null;
+  }
+
+  /**
+   * Mark a tutorial as completed
+   */
+  static async completeTutorial(userId: string, tutorialId: string): Promise<void> {
+    const state = await this.getUserTutorialState(userId);
+
+    if (state.tutorials[tutorialId]) {
+      state.tutorials[tutorialId].completedAt = new Date().toISOString();
+      state.tutorials[tutorialId].lastAccessedAt = new Date().toISOString();
+
+      const key = this.getTutorialKey(userId);
+      await setKVValue(key, state, { storeName: config.defaultStoreName });
+    }
+  }
+
+  /**
+   * Get all completed tutorials for a user
+   */
+  static async getCompletedTutorials(userId: string): Promise<TutorialProgress[]> {
+    const state = await this.getUserTutorialState(userId);
+    return Object.values(state.tutorials).filter(t => t.completedAt);
+  }
+
+  /**
+   * Get all active (in-progress) tutorials for a user
+   */
+  static async getActiveTutorials(userId: string): Promise<TutorialProgress[]> {
+    const state = await this.getUserTutorialState(userId);
+    return Object.values(state.tutorials).filter(t => !t.completedAt);
+  }
+}
diff --git a/lib/tutorial/tutorial-reader.ts b/lib/tutorial/tutorial-reader.ts
new file mode 100644
index 00000000..2efc8cf0
--- /dev/null
+++ b/lib/tutorial/tutorial-reader.ts
@@ -0,0 +1,144 @@
+import { readdir, readFile } from "fs/promises";
+import { join } from "path";
+import matter from "gray-matter";
+
+// TypeScript Interfaces
+export interface TutorialMetadata {
+  id: string;
+  title: string;
+  description: string;
+}
+
+export interface StepMetadata {
+  title: string;
+  description: string;
+}
+
+export interface Step {
+  stepNumber: number;
+  title: string;
+  description: string;
+  directory: string;
+  readmeContent: string;
+  codeContent: string;
+}
+
+export interface Tutorial {
+  id: string;
+  title: string;
+  description: string;
+  totalSteps: number;
+  steps: Step[];
+}
+
+/**
+ * Reads tutorial metadata from meta.json
+ */
+export async function readTutorialMetadata(contentPath: string): Promise<TutorialMetadata> {
+  try {
+    const metaPath = join(contentPath, "meta.json");
+    const metaContent = await readFile(metaPath, "utf-8");
+    const metadata = JSON.parse(metaContent) as TutorialMetadata;
+    
+    if (!metadata.id || !metadata.title || !metadata.description) {
+      throw new Error("Invalid meta.json: missing id, title, or description");
+    }
+    
+    return metadata;
+  } catch (error) {
+    throw new Error(`Failed to read tutorial metadata: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * Reads all steps from step_* directories
+ */
+export async function readSteps(contentPath: string): Promise<Step[]> {
+  try {
+    const entries = await readdir(contentPath, { withFileTypes: true });
+    const stepDirs = entries
+      .filter(entry => entry.isDirectory() && entry.name.startsWith('step_'))
+      .sort((a, b) => {
+        const aNum = parseInt(a.name.replace('step_', ''), 10);
+        const bNum = parseInt(b.name.replace('step_', ''), 10);
+        return aNum - bNum;
+      });
+    
+    const steps: Step[] = [];
+    
+    for (const stepDir of stepDirs) {
+      const stepPath = join(contentPath, stepDir.name);
+      const stepNumber = parseInt(stepDir.name.replace('step_', ''), 10);
+      
+      // Read README.md and parse front-matter
+      const readmePath = join(stepPath, "README.md");
+      const readmeContent = await readFile(readmePath, "utf-8");
+      const { data: frontmatter, content } = matter(readmeContent);
+      
+      // Validate front-matter has required fields
+      if (!frontmatter.title || !frontmatter.description) {
+        throw new Error(`Invalid front-matter in ${stepDir.name}/README.md: missing title or description`);
+      }
+      
+      // Read index.ts
+      const codePath = join(stepPath, "index.ts");
+      const codeContent = await readFile(codePath, "utf-8");
+      
+      steps.push({
+        stepNumber,
+        title: frontmatter.title,
+        description: frontmatter.description,
+        directory: stepDir.name,
+        readmeContent: content, // Use content without frontmatter
+        codeContent
+      });
+    }
+    
+    return steps;
+  } catch (error) {
+    throw new Error(`Failed to read steps: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * Reads a complete tutorial from the given content path
+ */
+export async function readTutorial(contentPath: string): Promise<Tutorial> {
+  try {
+    const [metadata, steps] = await Promise.all([
+      readTutorialMetadata(contentPath),
+      readSteps(contentPath)
+    ]);
+    
+    return {
+      id: metadata.id,
+      title: metadata.title,
+      description: metadata.description,
+      totalSteps: steps.length,
+      steps
+    };
+  } catch (error) {
+    throw new Error(`Failed to read tutorial: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * Utility function to get step by number
+ */
+export function getStepByNumber(tutorial: Tutorial, stepNumber: number): Step | undefined {
+  return tutorial.steps.find(step => step.stepNumber === stepNumber);
+}
+
+/**
+ * Utility function to get next step
+ */
+export function getNextStep(tutorial: Tutorial, currentStepNumber: number): Step | undefined {
+  return tutorial.steps.find(step => step.stepNumber === currentStepNumber + 1);
+}
+
+/**
+ * Utility function to get previous step
+ */
+export function getPreviousStep(tutorial: Tutorial, currentStepNumber: number): Step | undefined {
+  return tutorial.steps.find(step => step.stepNumber === currentStepNumber - 1);
+} 
\ No newline at end of file
diff --git a/lib/tutorial/types.ts b/lib/tutorial/types.ts
new file mode 100644
index 00000000..e4f946c0
--- /dev/null
+++ b/lib/tutorial/types.ts
@@ -0,0 +1,23 @@
+// Tutorial state management types
+
+export interface TutorialProgress {
+  tutorialId: string;
+  currentStep: number;
+  totalSteps: number;
+  startedAt: string;
+  completedAt?: string;
+  lastAccessedAt: string;
+}
+
+export interface UserTutorialState {
+  userId: string;
+  tutorials: {
+    [tutorialId: string]: TutorialProgress;
+  };
+}
+
+// Simple state for agent communication (matches existing agent types)
+export interface TutorialState {
+  tutorialId: string;
+  currentStep: number;
+}
diff --git a/lib/validation/middleware.ts b/lib/validation/middleware.ts
new file mode 100644
index 00000000..b04e3c7b
--- /dev/null
+++ b/lib/validation/middleware.ts
@@ -0,0 +1,141 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { MessageSchema } from '@/app/chat/types';
+
+export interface ValidationError {
+  field: string;
+  message: string;
+  received?: any;
+}
+
+export interface ValidationResult<T = any> {
+  success: boolean;
+  data?: T;
+  errors?: ValidationError[];
+}
+
+export function createValidationError(message: string, errors: ValidationError[]): NextResponse {
+  return NextResponse.json(
+    {
+      error: message,
+      details: errors.map(err => `${err.field}: ${err.message}`)
+    },
+    { status: 400 }
+  );
+}
+
+function zodErrorToValidationErrors(error: z.ZodError): ValidationError[] {
+  return error.issues.map((err: any) => ({
+    field: err.path.join('.'),
+    message: err.message,
+    received: err.received
+  }));
+}
+
+export async function parseAndValidateJSON<T>(
+  request: NextRequest,
+  schema: z.ZodSchema<T>
+): Promise<{ success: true; data: T } | { success: false; response: NextResponse }> {
+  let body: any;
+
+  try {
+    body = await request.json();
+  } catch {
+    return {
+      success: false,
+      response: NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+    };
+  }
+
+  const result = schema.safeParse(body);
+
+  if (!result.success) {
+    const errors = zodErrorToValidationErrors(result.error);
+    return {
+      success: false,
+      response: createValidationError('Validation failed', errors)
+    };
+  }
+
+  return { success: true, data: result.data };
+}
+
+export const TutorialProgressRequestSchema = z.object({
+  tutorialId: z.string().min(1),
+  currentStep: z.number().int().min(0),
+  totalSteps: z.number().int().min(1)
+});
+
+export const TutorialResetRequestSchema = z.object({
+  tutorialId: z.string().min(1)
+});
+
+export const SessionMessageRequestSchema = z.object({
+  message: MessageSchema,
+  processWithAgent: z.boolean().optional().default(true)
+});
+
+export const SessionMessageOnlyRequestSchema = z.object({
+  message: MessageSchema
+});
+
+export const StepNumberSchema = z.string().transform((val, ctx) => {
+  const stepIndex = Number.parseInt(val, 10);
+
+  if (Number.isNaN(stepIndex)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'must be a valid integer',
+    });
+    return z.NEVER;
+  }
+
+  if (stepIndex < 1) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'must be greater than 0',
+    });
+    return z.NEVER;
+  }
+
+  return stepIndex;
+});
+
+export const TutorialIdSchema = z.string().min(1, 'must be a non-empty string').refine(
+  (id) => !id.includes('..') && !id.includes('/') && !id.includes('\\'),
+  'contains invalid characters (path traversal attempt)'
+);
+
+export function validateStepNumber(stepNumber: string): ValidationResult<number> {
+  const result = StepNumberSchema.safeParse(stepNumber);
+
+  if (!result.success) {
+    return {
+      success: false,
+      errors: result.error.issues.map(issue => ({
+        field: 'stepNumber',
+        message: issue.message,
+        received: stepNumber
+      }))
+    };
+  }
+
+  return { success: true, data: result.data };
+}
+
+export function validateTutorialId(id: string): ValidationResult<string> {
+  const result = TutorialIdSchema.safeParse(id);
+
+  if (!result.success) {
+    return {
+      success: false,
+      errors: result.error.issues.map(issue => ({
+        field: 'tutorialId',
+        message: issue.message,
+        received: id
+      }))
+    };
+  }
+
+  return { success: true, data: result.data };
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7bc62672..11c370db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
 			"dependencies": {
 				"@radix-ui/react-dialog": "^1.1.14",
 				"@radix-ui/react-visually-hidden": "^1.2.3",
+				"allotment": "^1.20.4",
 				"cmdk": "^1.1.1",
 				"fumadocs-core": "15.2.6",
 				"fumadocs-mdx": "11.5.8",
@@ -26,7 +27,10 @@
 				"react-dom": "^19.0.0",
 				"react-markdown": "^10.1.0",
 				"remark-gfm": "^4.0.1",
-				"twoslash": "^0.3.1"
+				"swr": "^2.3.6",
+				"twoslash": "^0.3.1",
+				"uuid": "^11.1.0",
+				"zod": "^4.1.8"
 			},
 			"devDependencies": {
 				"@biomejs/biome": "2.1.2",
@@ -1503,6 +1507,19 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@aws-sdk/client-dynamodb/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@aws-sdk/client-lambda": {
 			"version": "3.857.0",
 			"resolved": "https://registry.npmjs.org/@aws-sdk/client-lambda/-/client-lambda-3.857.0.tgz",
@@ -2506,6 +2523,19 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@aws-sdk/client-lambda/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@aws-sdk/client-s3": {
 			"version": "3.857.0",
 			"resolved": "https://registry.npmjs.org/@aws-sdk/client-s3/-/client-s3-3.857.0.tgz",
@@ -3537,6 +3567,19 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@aws-sdk/client-s3/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@aws-sdk/client-sqs": {
 			"version": "3.857.0",
 			"resolved": "https://registry.npmjs.org/@aws-sdk/client-sqs/-/client-sqs-3.857.0.tgz",
@@ -4522,6 +4565,19 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@aws-sdk/client-sqs/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@aws-sdk/client-sso": {
 			"version": "3.398.0",
 			"resolved": "https://registry.npmjs.org/@aws-sdk/client-sso/-/client-sso-3.398.0.tgz",
@@ -7779,6 +7835,19 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@aws-sdk/nested-clients/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@aws-sdk/region-config-resolver": {
 			"version": "3.840.0",
 			"resolved": "https://registry.npmjs.org/@aws-sdk/region-config-resolver/-/region-config-resolver-3.840.0.tgz",
@@ -9555,6 +9624,11 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@juggle/resize-observer": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+			"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+		},
 		"node_modules/@mdx-js/mdx": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
@@ -11735,6 +11809,19 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/@smithy/middleware-retry/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@smithy/middleware-serde": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@smithy/middleware-serde/-/middleware-serde-2.3.0.tgz",
@@ -13180,6 +13267,35 @@
 				"node": ">= 8.0.0"
 			}
 		},
+		"node_modules/allotment": {
+			"version": "1.20.4",
+			"resolved": "https://registry.npmjs.org/allotment/-/allotment-1.20.4.tgz",
+			"integrity": "sha512-LMM5Xe5nLePFOLAlW/5k3ARqznYGUyNekV4xJrfDKn1jimW3nlZE6hT/Tu0T8s0VgAkr9s2P7+uM0WvJKn5DAw==",
+			"dependencies": {
+				"classnames": "^2.3.0",
+				"eventemitter3": "^5.0.0",
+				"lodash.clamp": "^4.0.0",
+				"lodash.debounce": "^4.0.0",
+				"lodash.isequal": "^4.5.0",
+				"use-resize-observer": "^9.0.0"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
+		"node_modules/allotment/node_modules/use-resize-observer": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+			"integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+			"dependencies": {
+				"@juggle/resize-observer": "^3.3.1"
+			},
+			"peerDependencies": {
+				"react": "16.8.0 - 18",
+				"react-dom": "16.8.0 - 18"
+			}
+		},
 		"node_modules/ansi-colors": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -13533,6 +13649,11 @@
 				"url": "https://polar.sh/cva"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+		},
 		"node_modules/client-only": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -14913,6 +15034,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/eventemitter3": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+			"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+		},
 		"node_modules/execa": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -15397,6 +15523,14 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/fumadocs-mdx/node_modules/zod": {
+			"version": "3.25.76",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+			"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
+		},
 		"node_modules/fumadocs-twoslash": {
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/fumadocs-twoslash/-/fumadocs-twoslash-3.1.4.tgz",
@@ -16535,6 +16669,22 @@
 			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
 			"license": "MIT"
 		},
+		"node_modules/lodash.clamp": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+			"integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+		},
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+		},
+		"node_modules/lodash.isequal": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+			"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead."
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -16989,19 +17139,6 @@
 				"uuid": "^11.1.0"
 			}
 		},
-		"node_modules/mermaid/node_modules/uuid": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
-			"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
-			"funding": [
-				"https://github.com/sponsors/broofa",
-				"https://github.com/sponsors/ctavan"
-			],
-			"license": "MIT",
-			"bin": {
-				"uuid": "dist/esm/bin/uuid"
-			}
-		},
 		"node_modules/methods": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -19960,6 +20097,18 @@
 				"url": "https://github.com/chalk/supports-color?sponsor=1"
 			}
 		},
+		"node_modules/swr": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
+			"integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"use-sync-external-store": "^1.4.0"
+			},
+			"peerDependencies": {
+				"react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/tailwind-merge": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -20368,6 +20517,14 @@
 				}
 			}
 		},
+		"node_modules/use-sync-external-store": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+			"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -20385,17 +20542,15 @@
 			}
 		},
 		"node_modules/uuid": {
-			"version": "9.0.1",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-			"dev": true,
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+			"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
 			"funding": [
 				"https://github.com/sponsors/broofa",
 				"https://github.com/sponsors/ctavan"
 			],
-			"license": "MIT",
 			"bin": {
-				"uuid": "dist/bin/uuid"
+				"uuid": "dist/esm/bin/uuid"
 			}
 		},
 		"node_modules/vary": {
@@ -20859,10 +21014,9 @@
 			}
 		},
 		"node_modules/zod": {
-			"version": "3.25.76",
-			"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-			"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-			"license": "MIT",
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
+			"integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==",
 			"funding": {
 				"url": "https://github.com/sponsors/colinhacks"
 			}
diff --git a/package.json b/package.json
index 10fdef39..396714eb 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 	"dependencies": {
 		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-visually-hidden": "^1.2.3",
+		"allotment": "^1.20.4",
 		"cmdk": "^1.1.1",
 		"fumadocs-core": "15.2.6",
 		"fumadocs-mdx": "11.5.8",
@@ -38,7 +39,10 @@
 		"react-dom": "^19.0.0",
 		"react-markdown": "^10.1.0",
 		"remark-gfm": "^4.0.1",
-		"twoslash": "^0.3.1"
+		"twoslash": "^0.3.1",
+		"swr": "^2.3.6",
+		"uuid": "^11.1.0",
+		"zod": "^4.1.8"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.1.2",
@@ -59,4 +63,4 @@
 			"js-yaml": "^3.14.1"
 		}
 	}
-}
+}
\ No newline at end of file