@promptbook/cli 0.104.0-1 → 0.104.0-11

package/apps/agents-server/src/app/agents/[agentName]/page.tsx

@@ -3,10 +3,11 @@
 import { $provideServer } from '@/src/tools/$provideServer';
 import { isUserAdmin } from '@/src/utils/isUserAdmin';
 import { saturate } from '@promptbook-local/color';
-import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { generatePlaceholderAgentProfileImageUrl, NotFoundError, PROMPTBOOK_COLOR } from '@promptbook-local/core';
 import { notFound } from 'next/navigation';
 import { Color } from '../../../../../../src/utils/color/Color';
-import { getAgentName, getAgentProfile } from './_utils';
+import { DeletedAgentBanner } from '../../../components/DeletedAgentBanner';
+import { getAgentName, getAgentProfile, isAgentDeleted } from './_utils';
 import { getAgentLinks } from './agentLinks';
 import { AgentProfileChat } from './AgentProfileChat';
 import { AgentProfileWrapper } from './AgentProfileWrapper';
@@ -26,24 +27,24 @@ export default async function AgentPage({
     const isAdmin = await isUserAdmin();
     const { headless: headlessParam } = await searchParams;
     const isHeadless = headlessParam !== undefined;
+    const { publicUrl } = await $provideServer();
 
     let agentProfile;
     try {
         agentProfile = await getAgentProfile(agentName);
     } catch (error) {
         if (
-            error instanceof Error &&
-            // Note: This is a bit hacky, but valid way to check for specific error message
-            (error.message.includes('Cannot coerce the result to a single JSON object') ||
-                error.message.includes('JSON object requested, multiple (or no) results returned'))
+            error instanceof NotFoundError ||
+            (error instanceof Error &&
+                // Note: This is a bit hacky, but valid way to check for specific error message
+                (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                    error.message.includes('JSON object requested, multiple (or no) results returned')))
         ) {
             notFound();
         }
         throw error;
     }
 
-    const { publicUrl } = await $provideServer();
-
     // Build agent page URL for QR and copy
     const agentUrl = `${publicUrl.href}${encodeURIComponent(agentName)}`;
     // <- TODO: [🐱‍🚀] Better
@@ -54,6 +55,7 @@ export default async function AgentPage({
     const brandColorHex = brandColor.then(saturate(-0.5)).toHex();
 
     const fullname = (agentProfile.meta.fullname || agentProfile.agentName || 'Agent') as string;
+    const isDeleted = await isAgentDeleted(agentName);
 
     return (
         <>
@@ -61,6 +63,7 @@ export default async function AgentPage({
             <AgentProfileWrapper
                 agent={agentProfile}
                 agentUrl={agentUrl}
+                publicUrl={publicUrl}
                 agentEmail={agentEmail}
                 agentName={agentName}
                 brandColorHex={brandColorHex}
@@ -68,7 +71,7 @@ export default async function AgentPage({
                 isHeadless={isHeadless}
                 actions={
                     <>
-                        {getAgentLinks(agentName)
+                        {getAgentLinks(agentProfile.permanentId || agentName)
                             .filter((link) => ['Edit Book', 'Integration', 'All Links'].includes(link.title))
                             .map((link) => (
                                 <a
@@ -86,12 +89,17 @@ export default async function AgentPage({
                     </>
                 }
             >
+                {isDeleted && <DeletedAgentBanner />}
                 <AgentProfileChat
                     agentUrl={agentUrl}
                     agentName={agentName}
                     fullname={fullname}
                     brandColorHex={brandColorHex}
-                    avatarSrc={agentProfile.meta.image!}
+                    avatarSrc={
+                        agentProfile.meta.image ||
+                        generatePlaceholderAgentProfileImageUrl(agentProfile.permanentId || agentName, publicUrl)
+                    }
+                    isDeleted={isDeleted}
                 />
             </AgentProfileWrapper>
         </>

package/apps/agents-server/src/app/agents/[agentName]/system-message/page.tsx

@@ -0,0 +1,100 @@
+'use server';
+
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { generatePlaceholderAgentProfileImageUrl } from '@promptbook-local/core';
+import { ArrowLeftIcon, FileTextIcon } from 'lucide-react';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentName, getAgentProfile } from '../_utils';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentSystemMessagePage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+
+    const { publicUrl } = await $provideServer();
+
+    const agentName = await getAgentName(params);
+
+    let agentProfile;
+    let agentSource;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+        const collection = await $provideAgentCollectionForServer();
+        agentSource = await collection.getAgentSource(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
+
+    // For now, we'll display the agent source as the system message
+    // TODO: [🧠] This might need to be the actual generated system message from the Agent class
+    const systemMessage = agentSource || 'No system message available';
+
+    return (
+        <div className="min-h-screen p-6 md:p-12 flex flex-col items-center bg-gray-50">
+            <div className="w-full max-w-4xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b border-gray-200 flex items-center gap-4">
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={
+                                agentProfile.meta.image ||
+                                generatePlaceholderAgentProfileImageUrl(
+                                    agentProfile.permanentId || agentName,
+                                    publicUrl,
+                                )
+                            }
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2 border-gray-200"
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <FileTextIcon className="w-4 h-4" />
+                            System Message
+                        </p>
+                    </div>
+                    <Link
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6">
+                    <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                        <h2 className="text-lg font-semibold text-gray-900 mb-3">Generated System Message</h2>
+                        <pre className="text-sm text-gray-700 whitespace-pre-wrap font-mono bg-white p-4 rounded border border-gray-200 overflow-x-auto">
+                            {systemMessage}
+                        </pre>
+                    </div>
+
+                    <div className="mt-6 bg-blue-50 rounded-lg p-4 border border-blue-200">
+                        <h3 className="text-md font-semibold text-blue-900 mb-2">Model Requirements</h3>
+                        <div className="text-sm text-blue-800">
+                            <p>
+                                <strong>Model Variant:</strong> CHAT
+                            </p>
+                            {/* TODO: [🧠] Add more model requirements if available */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/api/admin-email/route.ts

@@ -0,0 +1,12 @@
+import { getMetadata } from '../../../database/getMetadata';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+    try {
+        const adminEmail = await getMetadata('ADMIN_EMAIL');
+        return NextResponse.json({ adminEmail });
+    } catch (error) {
+        console.error('Failed to get admin email:', error);
+        return NextResponse.json({ adminEmail: 'support@ptbk.io' }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/agents/[agentName]/clone/route.ts

@@ -1,16 +1,15 @@
-// POST /api/agents/[agentName]/clone
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
-import { AgentBasicInformation } from '../../../../../../../../src/book-2.0/agent-source/AgentBasicInformation';
-import { string_book } from '../../../../../../../../src/book-2.0/agent-source/string_book';
 import { TODO_any } from '@promptbook-local/types';
 import { NextResponse } from 'next/server';
+import { string_book } from '../../../../../../../../src/book-2.0/agent-source/string_book';
 
 export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     const { agentName } = await params;
     const collection = await $provideAgentCollectionForServer();
 
     try {
-        const source = await collection.getAgentSource(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        const source = await collection.getAgentSource(agentId);
 
         // Generate new name
         // TODO: [🧠] Better naming strategy, maybe check for collisions
@@ -20,15 +19,15 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
         // eslint-disable-next-line no-constant-condition
         while (true) {
             try {
-                await collection.getAgentSource(newAgentName);
-                 // If success, it means it exists, so we try next one
-                 counter++;
-                 newAgentName = `${agentName} (Copy ${counter})`;
-             } catch (error) {
-                 // If error, it likely means it does not exist (NotFoundError), so we can use it
-                 // TODO: [🧠] Check if it is really NotFoundError
-                 break;
-             }
+                await collection.getAgentPermanentId(newAgentName);
+                // If success, it means it exists, so we try next one
+                counter++;
+                newAgentName = `${agentName} (Copy ${counter})`;
+            } catch (error) {
+                // If error, it likely means it does not exist (NotFoundError), so we can use it
+                // TODO: [🧠] Check if it is really NotFoundError
+                break;
+            }
         }
 
         const lines = source.split('\n');
@@ -36,7 +35,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ age
         const newSource = lines.join('\n') as string_book;
 
         const newAgent = await collection.createAgent(newSource);
-        
+
         return NextResponse.json(newAgent);
     } catch (error) {
         return NextResponse.json(

package/apps/agents-server/src/app/api/agents/[agentName]/restore/route.ts

@@ -0,0 +1,20 @@
+// POST /api/agents/[agentName]/restore - restore deleted agent
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { TODO_any } from '@promptbook-local/types';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+    const collection = await $provideAgentCollectionForServer();
+
+    try {
+        const agentId = await collection.getAgentPermanentId(agentName);
+        await collection.restoreAgent(agentId);
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to restore agent' },
+            { status: 500 },
+        );
+    }
+}

package/apps/agents-server/src/app/api/agents/[agentName]/route.ts

@@ -1,14 +1,56 @@
 // DELETE /api/agents/[agentName]
+// PATCH /api/agents/[agentName] - update agent visibility
+// POST /api/agents/[agentName]/restore - restore deleted agent
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabaseForServer } from '@/src/database/$provideSupabaseForServer';
 import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
 import { TODO_any } from '@promptbook-local/types';
 import { NextResponse } from 'next/server';
 
+export async function PATCH(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    const { agentName } = await params;
+
+    try {
+        const body = await request.json();
+        const { visibility }: { visibility: 'PUBLIC' | 'PRIVATE' } = body;
+
+        if (!visibility || !['PUBLIC', 'PRIVATE'].includes(visibility)) {
+            return NextResponse.json(
+                { success: false, error: 'Invalid visibility value. Must be PUBLIC or PRIVATE.' },
+                { status: 400 },
+            );
+        }
+
+        const supabase = $provideSupabaseForServer();
+        // const { tablePrefix } = await $provideServer();
+
+        const updateResult = await supabase
+            .from(await $getTableName(`Agent`))
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .update({ visibility } as any)
+            .or(`agentName.eq.${agentName},permanentId.eq.${agentName}`)
+            .is('deletedAt', null);
+
+        if (updateResult.error) {
+            return NextResponse.json({ success: false, error: updateResult.error.message }, { status: 500 });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        return NextResponse.json(
+            { success: false, error: (error as TODO_any)?.message || 'Failed to update agent visibility' },
+            { status: 500 },
+        );
+    }
+}
+
 export async function DELETE(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
     const { agentName } = await params;
     const collection = await $provideAgentCollectionForServer();
 
     try {
-        await collection.deleteAgent(agentName);
+        const agentId = await collection.getAgentPermanentId(agentName);
+        await collection.deleteAgent(agentId);
         return NextResponse.json({ success: true });
     } catch (error) {
         return NextResponse.json(

package/apps/agents-server/src/app/api/agents/route.ts

@@ -1,5 +1,7 @@
+import { $getTableName } from '@/src/database/$getTableName';
 import { $provideServer } from '@/src/tools/$provideServer';
 import { NextResponse } from 'next/server';
+import { $provideSupabaseForServer } from '../../../database/$provideSupabaseForServer';
 import { $provideAgentCollectionForServer } from '../../../tools/$provideAgentCollectionForServer';
 import { getFederatedServersFromMetadata } from '../../../utils/getFederatedServersFromMetadata';
 
@@ -8,13 +10,36 @@ export const dynamic = 'force-dynamic';
 export async function GET() {
     try {
         const collection = await $provideAgentCollectionForServer();
-        const agents = await collection.listAgents();
+        const allAgents = await collection.listAgents();
         const federatedServers = await getFederatedServersFromMetadata();
         const { publicUrl } = await $provideServer();
 
-        const agentsWithUrl = agents.map((agent) => ({
+        // Filter to only include PUBLIC agents for federated API
+        const supabase = $provideSupabaseForServer();
+        const visibilityResult = await supabase
+            .from(await $getTableName(`Agent`))
+            .select('agentName, visibility')
+            .is('deletedAt', null);
+
+        let publicAgents = allAgents;
+        if (!visibilityResult.error) {
+            const visibilityMap = new Map(
+                visibilityResult.data.map((item: { agentName: string; visibility: 'PUBLIC' | 'PRIVATE' }) => [
+                    item.agentName,
+                    item.visibility,
+                ]),
+            );
+
+            // Only include PUBLIC agents in federated API
+            publicAgents = allAgents.filter((agent) => {
+                const visibility = visibilityMap.get(agent.agentName);
+                return visibility === 'PUBLIC';
+            });
+        }
+
+        const agentsWithUrl = publicAgents.map((agent) => ({
             ...agent,
-            url: `${publicUrl.href}agents/${encodeURIComponent(agent.agentName)}`,
+            url: `${publicUrl.href}agents/${encodeURIComponent(agent.permanentId || agent.agentName)}`,
         }));
 
         const response = NextResponse.json({

package/apps/agents-server/src/app/api/api-tokens/route.ts

@@ -1,10 +1,13 @@
+import { randomUUID } from 'crypto';
+import { NextRequest, NextResponse } from 'next/server';
+import { keepUnused } from '../../../../../../src/utils/organization/keepUnused';
 import { $getTableName } from '../../../database/$getTableName';
 import { $provideSupabase } from '../../../database/$provideSupabase';
 import { isUserAdmin } from '../../../utils/isUserAdmin';
-import { randomUUID } from 'crypto';
-import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(request: NextRequest) {
+    keepUnused(request);
+
     if (!(await isUserAdmin())) {
         return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
     }
@@ -35,11 +38,7 @@ export async function POST(request: NextRequest) {
         const supabase = $provideSupabase();
         const table = await $getTableName('ApiTokens');
 
-        const { data, error } = await supabase
-            .from(table)
-            .insert({ token, note })
-            .select()
-            .single();
+        const { data, error } = await supabase.from(table).insert({ token, note }).select().single();
 
         if (error) {
             return NextResponse.json({ error: error.message }, { status: 500 });

package/apps/agents-server/src/app/api/browser-test/act/route.ts

@@ -0,0 +1,141 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { NextRequest, NextResponse } from 'next/server';
+import { OpenAI } from 'openai';
+
+export const maxDuration = 60; // Allow longer timeout for agent actions
+
+export async function POST(request: NextRequest) {
+    try {
+        const { goal, action, plan } = await request.json();
+
+        if (!goal) {
+            return NextResponse.json({ error: 'Goal is required' }, { status: 400 });
+        }
+
+        const browserContext = await $provideBrowserForServer();
+        const pages = browserContext.pages();
+        let page = pages[0];
+
+        if (!page) {
+            page = await browserContext.newPage();
+            await page.goto('https://www.facebook.com/');
+        }
+
+        // Ensure we are on Facebook
+        if (!page.url().includes('facebook.com')) {
+            await page.goto('https://www.facebook.com/');
+        }
+
+        const openai = new OpenAI({
+            apiKey: process.env.OPENAI_API_KEY,
+        });
+
+        // Get page context (simplified for now: just text content)
+        // In a real scenario, we would use accessibility tree or screenshots
+        const pageText = await page.evaluate(() => document.body.innerText.slice(0, 10000)); // Limit text size
+
+        if (action === 'plan') {
+            const systemPrompt = `
+                You are an autonomous agent interacting with Facebook.
+                Your goal is to help the user achieve: "${goal}".
+                Analyze the current page content and propose a step-by-step plan.
+                Keep the plan concise and actionable.
+                Do not execute any actions yet, just list them.
+            `;
+
+            const completion = await openai.chat.completions.create({
+                model: 'gpt-4o',
+                messages: [
+                    { role: 'system', content: systemPrompt },
+                    { role: 'user', content: `Current page text (truncated):\n${pageText}` },
+                ],
+            });
+
+            const plan = completion.choices[0].message.content;
+            return NextResponse.json({ plan });
+        } else if (action === 'execute') {
+            // This is a simplified execution. Ideally, this would be a loop.
+            // We ask the LLM to give us a JSON of actions to perform immediately.
+            
+            const systemPrompt = `
+                You are an autonomous agent interacting with Facebook.
+                Your goal is to help the user achieve: "${goal}".
+                ${plan ? `You have previously agreed to this plan:\n${plan}\n\n` : ''}
+                Based on the current page content, generate a list of low-level actions to perform NOW to advance the plan.
+                
+                Supported actions:
+                - { "type": "click", "selector": "css selector", "description": "reason" }
+                - { "type": "type", "selector": "css selector", "text": "text to type", "description": "reason" }
+                - { "type": "scroll", "amount": number, "description": "reason" }
+                - { "type": "wait", "ms": number, "description": "reason" }
+                - { "type": "navigate", "url": "url", "description": "reason" }
+
+                Return a JSON object with a key "actions" containing an array of these actions.
+                Example: { "actions": [{ "type": "scroll", "amount": 500, "description": "scanning feed" }, { "type": "click", "selector": "...", "description": "liking post" }] }
+                
+                IMPORTANT: Return ONLY valid JSON.
+            `;
+
+            const completion = await openai.chat.completions.create({
+                model: 'gpt-4o',
+                messages: [
+                    { role: 'system', content: systemPrompt },
+                    { role: 'user', content: `Current page text (truncated):\n${pageText}` },
+                ],
+                response_format: { type: 'json_object' },
+            });
+
+            const responseContent = completion.choices[0].message.content;
+            if (!responseContent) {
+                throw new Error('No response from AI');
+            }
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const { actions } = JSON.parse(responseContent) as { actions: any[] };
+            const results = [];
+
+            for (const act of actions) {
+                console.log('Executing action:', act);
+                try {
+                    if (act.type === 'click') {
+                        // Try to find element and click
+                        // We might need to use evaluate if selector is complex or text-based, but let's stick to CSS for now
+                        // Or ask LLM to give text-based selector?
+                        // Playwright's locator is powerful.
+                        // Let's assume standard CSS selectors for now.
+                        if (act.selector) {
+                            // Try to wait for it briefly
+                            await page.waitForSelector(act.selector, { timeout: 2000 });
+                            await page.click(act.selector);
+                        }
+                    } else if (act.type === 'type') {
+                        if (act.selector && act.text) {
+                            await page.waitForSelector(act.selector, { timeout: 2000 });
+                            await page.type(act.selector, act.text);
+                        }
+                    } else if (act.type === 'scroll') {
+                        await page.evaluate((y) => window.scrollBy(0, y), act.amount || 500);
+                    } else if (act.type === 'wait') {
+                        await page.waitForTimeout(act.ms || 1000);
+                    } else if (act.type === 'navigate') {
+                        if (act.url) await page.goto(act.url);
+                    }
+                    results.push({ action: act, status: 'success' });
+                } catch (error) {
+                    console.error('Action failed:', act, error);
+                    results.push({ action: act, status: 'error', error: String(error) });
+                }
+                // Small delay between actions
+                await page.waitForTimeout(500);
+            }
+
+            return NextResponse.json({ success: true, results });
+        }
+
+        return NextResponse.json({ error: 'Invalid action' }, { status: 400 });
+
+    } catch (error) {
+        console.error('Error in Act on Facebook:', error);
+        return NextResponse.json({ error: String(error) }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/browser-test/screenshot/route.ts

@@ -0,0 +1,30 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { serializeError } from '@promptbook-local/utils';
+import { NextResponse } from 'next/server';
+import { assertsError } from '../../../../../../../src/errors/assertsError';
+
+export async function GET() {
+    try {
+        const browserContext = await $provideBrowserForServer();
+
+        const page = await browserContext.newPage();
+
+        await page.goto('https://ptbk.io');
+        const screenshotBuffer = await page.screenshot();
+
+        // await page.close();
+        // Do not close browser
+        // <- TODO: !!!! Fix
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return new NextResponse(new Blob([screenshotBuffer as any]), {
+            headers: {
+                'Content-Type': 'image/png',
+            },
+        });
+    } catch (error) {
+        assertsError(error);
+        console.error('Error taking screenshot:', error);
+        return NextResponse.json({ error: serializeError(error) }, { status: 500 });
+    }
+}

package/apps/agents-server/src/app/api/browser-test/scroll-facebook/route.ts

@@ -0,0 +1,62 @@
+import { $provideBrowserForServer } from '@/src/tools/$provideBrowserForServer';
+import { NextResponse } from 'next/server';
+import { just } from '../../../../../../../src/utils/organization/just';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            try {
+                console.log('Starting Facebook scroll session');
+                const browserContext = await $provideBrowserForServer();
+                const page = await browserContext.newPage();
+
+                await page.goto('https://www.facebook.com/');
+                console.log('Navigated to Facebook');
+
+                // Loop for streaming
+                while (just(true)) {
+                    // Check for login (simple check for now)
+                    // Facebook uses role="banner" for the top navigation bar when logged in
+                    const isLoggedIn = await page.$('div[role="banner"]');
+
+                    if (isLoggedIn) {
+                        // Scroll down
+                        await page.evaluate(() => window.scrollBy(0, 500));
+                        // console.log('Scrolled');
+                    } else {
+                        // console.log('Waiting for login...');
+                    }
+
+                    const buffer = await page.screenshot({ type: 'jpeg', quality: 50 });
+
+                    const boundary = '--myboundary';
+                    const header = `\r\n${boundary}\r\nContent-Type: image/jpeg\r\nContent-Length: ${buffer.length}\r\n\r\n`;
+
+                    controller.enqueue(encoder.encode(header));
+                    controller.enqueue(buffer);
+
+                    // Short delay
+                    await new Promise((r) => setTimeout(r, 200));
+                }
+            } catch (error) {
+                console.error('Stream error:', error);
+                try {
+                    controller.close();
+                } catch (e) {
+                    // Ignore error if controller is already closed
+                }
+            }
+        },
+    });
+
+    return new NextResponse(stream, {
+        headers: {
+            'Content-Type': 'multipart/x-mixed-replace; boundary=myboundary',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+        },
+    });
+}