@promptbook/cli 0.114.0-5 → 0.114.0-50

package/apps/agents-server/src/app/api/internal/agent-goal-chat-planned-messages/route.ts

@@ -0,0 +1,201 @@
+import { NextResponse } from 'next/server';
+import { spaceTrim } from 'spacetrim';
+import { LimitReachedError } from '../../../../../../../src/errors/LimitReachedError';
+import { NotFoundError } from '../../../../../../../src/errors/NotFoundError';
+import { ParseError } from '../../../../../../../src/errors/ParseError';
+import { isTimingSafeEqualString } from '../../../../../../../src/utils/isTimingSafeEqualString';
+import { USER_CHAT_WORKER_TOKEN_HEADER } from '@/src/utils/agentProjects/agentProjectRuntimeConstants';
+import { AGENT_GOAL_CHAT_PLANNED_MESSAGE_ACTIONS } from '@/src/utils/agentGoalChat/agentGoalChatPlannedMessageActions';
+import { $provideAgentCollectionForServer } from '@/src/tools/$provideAgentCollectionForServer';
+import { resolveUserChatWorkerInternalToken } from '@/src/utils/userChat';
+
+/**
+ * Actions accepted by the internal planned-message runtime route.
+ */
+const AGENT_GOAL_CHAT_PLANNED_MESSAGE_REQUEST_ACTIONS = ['set', 'update', 'list', 'cancel'] as const;
+
+/**
+ * Supported planned-message runtime action.
+ */
+type AgentGoalChatPlannedMessageAction = (typeof AGENT_GOAL_CHAT_PLANNED_MESSAGE_REQUEST_ACTIONS)[number];
+
+/**
+ * Parsed internal runtime request.
+ */
+type AgentGoalChatPlannedMessageRequest = {
+    readonly action: AgentGoalChatPlannedMessageAction;
+    readonly body: Record<string, unknown>;
+};
+
+/**
+ * Keeps planned-message persistence on the Node.js runtime.
+ */
+export const runtime = 'nodejs';
+
+/**
+ * Handles planned-message commands from an Agents Server-managed coding agent.
+ */
+export async function POST(request: Request) {
+    if (!isAuthorizedInternalWorkerRequest(request)) {
+        return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    try {
+        const plannedMessageRequest = await parseAgentGoalChatPlannedMessageRequest(request);
+        const result = await executeAgentGoalChatPlannedMessageRequest(plannedMessageRequest);
+
+        return NextResponse.json(result);
+    } catch (error) {
+        if (error instanceof ParseError) {
+            return NextResponse.json({ error: error.message }, { status: 400 });
+        }
+
+        if (error instanceof LimitReachedError) {
+            return NextResponse.json({ error: error.message }, { status: 429 });
+        }
+
+        if (error instanceof NotFoundError) {
+            return NextResponse.json({ error: error.message }, { status: 404 });
+        }
+
+        console.error('[agent-goal-chat-planned-messages] internal route failed', error);
+        return NextResponse.json(
+            {
+                error: error instanceof Error ? error.message : 'Failed to manage planned goal-chat messages.',
+            },
+            { status: 500 },
+        );
+    }
+}
+
+/**
+ * Parses one internal planned-message request body.
+ */
+async function parseAgentGoalChatPlannedMessageRequest(request: Request): Promise<AgentGoalChatPlannedMessageRequest> {
+    const rawBody = await request.json().catch(() => null);
+
+    if (!rawBody || typeof rawBody !== 'object' || Array.isArray(rawBody)) {
+        throw new ParseError('Expected a JSON object body.');
+    }
+
+    const body = rawBody as Record<string, unknown>;
+    const action = normalizeAgentGoalChatPlannedMessageAction(body.action);
+
+    return { action, body };
+}
+
+/**
+ * Executes one normalized planned-message request through the shared action service.
+ */
+async function executeAgentGoalChatPlannedMessageRequest(request: AgentGoalChatPlannedMessageRequest) {
+    const agentPermanentId = await resolveCanonicalAgentPermanentId(request.body.agentPermanentId);
+
+    if (request.action === 'set') {
+        return await AGENT_GOAL_CHAT_PLANNED_MESSAGE_ACTIONS.set({
+            agentPermanentId,
+            ...createPlannedMessageScheduleRequest(request.body),
+            message: request.body.message,
+        });
+    }
+
+    if (request.action === 'update') {
+        return await AGENT_GOAL_CHAT_PLANNED_MESSAGE_ACTIONS.update({
+            agentPermanentId,
+            timeoutId: request.body.timeoutId,
+            ...createPlannedMessageScheduleRequest(request.body),
+            ...(request.body.message === undefined ? {} : { message: request.body.message }),
+        });
+    }
+
+    if (request.action === 'list') {
+        return await AGENT_GOAL_CHAT_PLANNED_MESSAGE_ACTIONS.list({
+            agentPermanentId,
+            isIncludingFinished: request.body.isIncludingFinished,
+            limit: request.body.limit,
+        });
+    }
+
+    return await AGENT_GOAL_CHAT_PLANNED_MESSAGE_ACTIONS.cancel({
+        agentPermanentId,
+        timeoutId: request.body.timeoutId,
+    });
+}
+
+/**
+ * Collects the schedule fields of one internal planned-message request.
+ *
+ * A field which is not part of the request body stays absent, so one update changes only what it
+ * really names and everything else keeps its stored value.
+ *
+ * @param body - Parsed request body.
+ * @returns Schedule fields passed to the shared planned-message actions.
+ */
+function createPlannedMessageScheduleRequest(body: Record<string, unknown>): Record<string, unknown> {
+    return {
+        ...(body.milliseconds === undefined ? {} : { milliseconds: body.milliseconds }),
+        ...(body.cronExpression === undefined ? {} : { cronExpression: body.cronExpression }),
+        ...(body.startsAt === undefined ? {} : { startsAt: body.startsAt }),
+        ...(body.endsAt === undefined ? {} : { endsAt: body.endsAt }),
+        ...(body.maxRunCount === undefined ? {} : { maxRunCount: body.maxRunCount }),
+    };
+}
+
+/**
+ * Validates one planned-message action value.
+ */
+function normalizeAgentGoalChatPlannedMessageAction(rawAction: unknown): AgentGoalChatPlannedMessageAction {
+    if (
+        typeof rawAction === 'string' &&
+        AGENT_GOAL_CHAT_PLANNED_MESSAGE_REQUEST_ACTIONS.includes(rawAction as AgentGoalChatPlannedMessageAction)
+    ) {
+        return rawAction as AgentGoalChatPlannedMessageAction;
+    }
+
+    throw new ParseError(
+        spaceTrim(`
+            Invalid planned-message \`action\`.
+
+            - Use one of: \`${AGENT_GOAL_CHAT_PLANNED_MESSAGE_REQUEST_ACTIONS.join('`, `')}\`.
+        `),
+    );
+}
+
+/**
+ * Resolves an agent identifier to its canonical permanent id before persistence.
+ *
+ * Coding runners identify local folders with lowercase ids, while goal-chat and
+ * timeout records use the canonical database id.
+ *
+ * @param rawAgentPermanentId - Untrusted identifier from the internal runtime request.
+ * @returns The canonical permanent id of the active agent.
+ */
+async function resolveCanonicalAgentPermanentId(rawAgentPermanentId: unknown): Promise<string> {
+    if (typeof rawAgentPermanentId !== 'string' || rawAgentPermanentId.trim().length === 0) {
+        throw new ParseError('Missing required `agentPermanentId` string.');
+    }
+
+    const requestedAgentIdentifier = rawAgentPermanentId.trim();
+    const collection = await $provideAgentCollectionForServer();
+    const agent = await collection.findAgentBasicInformation(requestedAgentIdentifier);
+    const agentPermanentId = agent?.permanentId?.trim();
+
+    if (!agentPermanentId) {
+        throw new NotFoundError(
+            spaceTrim(`
+                Agent \`${requestedAgentIdentifier}\` was not found.
+
+                **Note:** Planned messages can only be managed for an active Agents Server agent.
+            `),
+        );
+    }
+
+    return agentPermanentId;
+}
+
+/**
+ * Validates the shared internal worker token.
+ */
+function isAuthorizedInternalWorkerRequest(request: Request): boolean {
+    const token = request.headers.get(USER_CHAT_WORKER_TOKEN_HEADER);
+    return isTimingSafeEqualString(token, resolveUserChatWorkerInternalToken());
+}

package/apps/agents-server/src/app/globals.css

@@ -177,6 +177,21 @@ body {
     min-height: var(--agents-server-app-height);
 }
 
+/**
+ * Shared font variables used by both app-router and pages-router shells.
+ *
+ * The named families remain optional, with the existing system fallbacks
+ * keeping the application usable when they are not installed locally.
+ */
+.application-font-variables {
+    --font-barlow-condensed: 'Barlow Condensed';
+    --font-poppins: 'Poppins';
+}
+
+.font-barlow-condensed {
+    font-family: var(--font-barlow-condensed), 'OpenMojiColor', 'OpenMojiBlack', Arial, Helvetica, sans-serif;
+}
+
 html.dark body {
     background: radial-gradient(circle at 15% 12%, rgba(14, 165, 233, 0.16), transparent 24%),
         radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.12), transparent 22%),

package/apps/agents-server/src/app/page.tsx

@@ -11,10 +11,10 @@ import { isUserAdmin } from '../utils/isUserAdmin';
 import { isUserGlobalAdmin } from '../utils/isUserGlobalAdmin';
 import {
     createServerPublicUrl,
-    listRegisteredServersUsingServiceRole,
     resolveRegisteredServerByHost,
     type ServerRecord,
 } from '../utils/serverRegistry';
+import { listRegisteredServersUsingServiceRole } from '../utils/serverRegistryNode';
 import { isStandaloneVpsRawIpBootstrapActive } from '../utils/standaloneVpsRawIpBootstrap';
 import { getHomePageAgents } from './_data/getHomePageAgents';
 

package/apps/agents-server/src/app/superadmin/servers/ServersRegistryTable.tsx

@@ -2,10 +2,10 @@
 
 import { Fragment } from 'react';
 import { ArrowRightLeft, Bot, ExternalLink, Loader2, Mail, RefreshCcw, Save } from 'lucide-react';
-import { AgentProjectDnsInstructions } from '../../../components/AgentProjectDnsInstructions/AgentProjectDnsInstructions';
 import { DnsRecordsInstructions } from '../../../components/DnsRecordsInstructions/DnsRecordsInstructions';
 import { useServerLanguage } from '../../../components/ServerLanguage/ServerLanguageProvider';
 import type { ServerLanguageCode } from '../../../languages/ServerLanguageRegistry';
+import { createServerDnsRecordsSections } from '../../../utils/dnsRecords/createServerDnsRecordsSections';
 import { formatServerLanguageHumanReadableDate } from '../../../utils/localization/formatServerLanguageHumanReadableDate';
 import { AdminSortableTableHeaderCell } from '../../admin/_components/AdminSortableTableHeaderCell';
 import { useAdminTableSorting } from '../../admin/_components/adminTableSorting';
@@ -244,6 +244,7 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
     const hasProjectDnsIssue = projectDomains.some((projectDomain) =>
         isManagedServerDnsDiagnosticIssue(projectDomain.dnsDiagnostic),
     );
+    const generatedProjectDomain = projectDomains.find((projectDomain) => !projectDomain.customDomain)?.domain ?? null;
     const columnCount = isStandaloneVps ? 6 : 8;
 
     return (
@@ -341,10 +342,10 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
                         <a
                             href={`https://${server.domain}/admin/email-server`}
                             className={`${SECONDARY_BUTTON_CLASS_NAME} px-2 py-1 text-xs`}
-                            title={`MX, SPF, DKIM, and DMARC instructions for ${server.domain}`}
+                            title={`Agent addresses and the generated DKIM zone of ${server.domain}`}
                         >
                             <Mail className="h-3.5 w-3.5" />
-                            Mail DNS
+                            Email server
                         </a>
                         <button
                             type="button"
@@ -390,57 +391,54 @@ function ServersRegistryTableRow(props: ServersRegistryTableRowProps) {
             </tr>
             <tr className="bg-sky-50/50">
                 <td colSpan={columnCount} className="px-4 py-4">
-                    <ProjectDomainsPanel
-                        projectDomains={projectDomains}
-                        publicIpAddress={dnsDiagnostic?.publicIpAddress}
-                        serverDomain={server.domain}
-                    />
+                    <ProjectDomainsPanel projectDomains={projectDomains} />
                 </td>
             </tr>
-            {hasDnsIssue && dnsDiagnostic ? (
-                <tr className="bg-amber-50/70">
-                    <td colSpan={columnCount} className="px-4 py-4">
-                        <DnsRecordsInstructions
-                            description={dnsDiagnostic.summary}
-                            domain={server.domain}
-                            recordSelection="one"
-                            records={dnsDiagnostic.expectedRecords}
-                            providerGuides={dnsDiagnostic.providerGuides}
-                            resolvedAddresses={dnsDiagnostic.resolvedAddresses}
-                            title={
+            <tr className="bg-amber-50/70">
+                <td colSpan={columnCount} className="px-4 py-4">
+                    <DnsRecordsInstructions
+                        description="Everything this server needs at its DNS provider - its own domain, the generated project domains, and its email. Add all of them at once with the Cloudflare wizard below."
+                        domain={server.domain}
+                        providerGuides={dnsDiagnostic?.providerGuides}
+                        sections={createServerDnsRecordsSections({
+                            serverDomain: server.domain,
+                            dnsDiagnostic,
+                            isProjectDnsIssue: hasProjectDnsIssue,
+                            projectDomain: generatedProjectDomain,
+                        })}
+                        title={
+                            hasDnsIssue || hasProjectDnsIssue ? (
                                 <>
                                     DNS setup needs attention for <span className="font-mono">{server.domain}</span>
                                 </>
-                            }
-                        />
-                    </td>
-                </tr>
-            ) : null}
+                            ) : (
+                                <>
+                                    DNS setup for <span className="font-mono">{server.domain}</span>
+                                </>
+                            )
+                        }
+                    />
+                </td>
+            </tr>
         </>
     );
 }
 
 /**
- * Renders assigned project domains and preventive DNS guidance for one server.
+ * Renders the project domains assigned to one server.
+ *
+ * Their DNS setup intentionally lives in the one shared DNS manual of the server instead of in this listing.
  */
 function ProjectDomainsPanel({
-    publicIpAddress,
     projectDomains,
-    serverDomain,
 }: {
-    readonly publicIpAddress: string | null | undefined;
     readonly projectDomains: NonNullable<ManagedServerRow['projectDomains']>;
-    readonly serverDomain: string;
 }) {
     const projectDomainSorting = useAdminTableSorting<ProjectDomainRow, ProjectDomainsTableSortField>({
         rows: projectDomains,
         defaultSortBy: 'projectName',
         resolveSortValue: resolveProjectDomainSortValue,
     });
-    const generatedProjectDomain = projectDomains.find((projectDomain) => !projectDomain.customDomain)?.domain ?? null;
-    const hasProjectDnsIssue = projectDomains.some((projectDomain) =>
-        isManagedServerDnsDiagnosticIssue(projectDomain.dnsDiagnostic),
-    );
 
     return (
         <div className="space-y-3 rounded-lg border border-sky-200 bg-sky-50 px-4 py-4 text-sm text-sky-950">
@@ -535,12 +533,6 @@ function ProjectDomainsPanel({
                     </table>
                 </div>
             )}
-            <AgentProjectDnsInstructions
-                isDnsIssue={hasProjectDnsIssue}
-                projectDomain={generatedProjectDomain}
-                publicIpAddress={publicIpAddress}
-                serverDomain={serverDomain}
-            />
         </div>
     );
 }

package/apps/agents-server/src/app/swagger/SwaggerPageClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { type ComponentType, useEffect, useState } from 'react';
-import 'swagger-ui-react/swagger-ui.css';
+import { useEffect, useRef, useState } from 'react';
+import 'swagger-ui-dist/swagger-ui.css';
 import { SwaggerApiKeysPanel } from './SwaggerApiKeysPanel';
 
 /**
@@ -18,26 +18,43 @@ type SwaggerPageClientProps = {
  * Renders the runtime-generated Swagger UI and the compact API-key helper panel.
  */
 export function SwaggerPageClient({ isAdmin }: SwaggerPageClientProps) {
-    const [SwaggerUI, setSwaggerUI] = useState<ComponentType<{
-        url: string;
-        persistAuthorization?: boolean;
-        defaultModelsExpandDepth?: number;
-        docExpansion?: 'list' | 'full' | 'none';
-    }> | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [hasLoadError, setHasLoadError] = useState(false);
 
     useEffect(() => {
         let isMounted = true;
+        const container = containerRef.current;
 
         void (async () => {
-            const swaggerUiModule = await import('swagger-ui-react');
+            try {
+                // Import the browser bundle directly; the package entry point also imports Node.js helpers.
+                const { default: SwaggerUIBundle } = await import('swagger-ui-dist/swagger-ui-bundle.js');
 
-            if (isMounted) {
-                setSwaggerUI(() => swaggerUiModule.default);
+                if (!isMounted || !container) {
+                    return;
+                }
+
+                SwaggerUIBundle({
+                    domNode: container,
+                    url: '/openapi.json',
+                    persistAuthorization: true,
+                    defaultModelsExpandDepth: -1,
+                    docExpansion: 'list',
+                });
+                setIsLoading(false);
+            } catch (error) {
+                if (isMounted) {
+                    console.error('Failed to load Swagger UI:', error);
+                    setHasLoadError(true);
+                    setIsLoading(false);
+                }
             }
         })();
 
         return () => {
             isMounted = false;
+            container?.replaceChildren();
         };
     }, []);
 
@@ -47,16 +64,15 @@ export function SwaggerPageClient({ isAdmin }: SwaggerPageClientProps) {
                 <SwaggerApiKeysPanel isAdmin={isAdmin} />
             </div>
             <div className="swagger-container bg-white min-h-screen">
-                {SwaggerUI ? (
-                    <SwaggerUI
-                        url="/openapi.json"
-                        persistAuthorization
-                        defaultModelsExpandDepth={-1}
-                        docExpansion="list"
-                    />
-                ) : (
+                {isLoading && (
                     <div className="mx-auto max-w-7xl px-4 py-10 text-sm text-slate-500">Loading Swagger UI...</div>
                 )}
+                {hasLoadError && (
+                    <div role="alert" className="mx-auto max-w-7xl px-4 py-10 text-sm text-red-600">
+                        Failed to load Swagger UI. Please reload the page.
+                    </div>
+                )}
+                <div ref={containerRef} />
             </div>
         </div>
     );

package/apps/agents-server/src/components/AgentNaming/legacyAgentTextTranslations.cs.yaml

@@ -479,9 +479,16 @@
 "Loading messages…": "Načítám zprávy…"
 "No messages found.": "Nebyly nalezeny žádné zprávy."
 "Sender/Recipients": "Odesílatel/Příjemci"
+"Sender": "Odesílatel"
+"Recipients": "Příjemci"
+"From": "Od"
+"To": "Komu"
 "Content": "Obsah"
 "Pending": "Čeká"
 "Sent": "Odesláno"
+"Received": "Přijato"
+"Failed": "Selhalo"
+"Complete log": "Kompletní log"
 "Error simulation": "Simulace chyb"
 "Unhandled API throw": "Nezachycený pád API"
 "Handled API 500 response": "Zachycená API odpověď 500"

package/apps/agents-server/src/components/AgentProfile/AgentProfile.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { spaceTrim } from 'spacetrim';
+
 
 import { colorToDataUrl } from '@promptbook-local/color';
 import { AgentBasicInformation, string_agent_permanent_id, string_url } from '@promptbook-local/types';
@@ -104,6 +106,13 @@ export function AgentProfile(props: AgentProfileProps) {
     // Dynamic Font Loading
     const fontString = meta.font;
     const primaryFontFamily = fontString ? (fontString.split(',')[0] || '').trim().replace(/['"]/g, '') : '';
+    const PRIMARY_FONT_IMPORT_STYLES = primaryFontFamily
+        ? spaceTrim(
+              (block) => `
+                  @import url('https://fonts.googleapis.com/css2?family=${block(encodeURIComponent(primaryFontFamily))}:wght@400;600;700&display=swap');
+              `,
+          )
+        : '';
     let fontStyle: React.CSSProperties = {};
 
     if (fontString) {
@@ -120,9 +129,7 @@ export function AgentProfile(props: AgentProfileProps) {
     return (
         <>
             {primaryFontFamily && (
-                <style jsx global>{`
-                    @import url('https://fonts.googleapis.com/css2?family=${encodeURIComponent(primaryFontFamily)}:wght@400;600;700&display=swap');
-                `}</style>
+                <style jsx global>{PRIMARY_FONT_IMPORT_STYLES}</style>
             )}
 
             {/* Full-screen background with agent color */}

package/apps/agents-server/src/components/AgentProjects/AgentProjectIcon.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { AgentProjectReferenceInfo } from '../../utils/agentProjects/AgentProjectReferenceInfo';
+import { buildAgentProjectFileHrefForServer } from '../../utils/agentProjects/agentProjectHrefs';
+import { createAgentProjectInitials } from '../../utils/agentProjects/createAgentProjectInitials';
+
+/**
+ * Sizes at which one project icon is shown.
+ */
+export type AgentProjectIconSize = 'small' | 'card' | 'header';
+
+/**
+ * Project fields required to render the icon of one project.
+ */
+export type AgentProjectIconInfo = Pick<AgentProjectReferenceInfo, 'projectName' | 'faviconRelativePath'>;
+
+/**
+ * Classes of the icon container, of the favicon and of the initials per icon size.
+ */
+const AGENT_PROJECT_ICON_CLASS_NAMES_BY_SIZE: Record<
+    AgentProjectIconSize,
+    {
+        /**
+         * Classes of the icon container.
+         */
+        readonly container: string;
+
+        /**
+         * Classes of the rendered favicon.
+         */
+        readonly favicon: string;
+
+        /**
+         * Classes of the rendered initials.
+         */
+        readonly initials: string;
+    }
+> = {
+    small: { container: 'h-5 w-5 rounded-md', favicon: 'p-0.5', initials: 'text-[0.5rem] tracking-tight' },
+    card: { container: 'h-11 w-11 rounded-lg', favicon: 'p-1.5', initials: 'text-sm' },
+    header: { container: 'h-9 w-9 rounded-lg', favicon: 'p-1', initials: 'text-xs' },
+};
+
+/**
+ * Props for one project icon.
+ */
+type AgentProjectIconProps = {
+    /**
+     * Permanent id of the agent owning the project.
+     */
+    readonly agentPermanentId: string;
+
+    /**
+     * Project the icon belongs to.
+     */
+    readonly project: AgentProjectIconInfo;
+
+    /**
+     * Public domain of the server owning the project, when known.
+     */
+    readonly serverDomain?: string | null;
+
+    /**
+     * Public domain serving the current page, when known.
+     */
+    readonly currentServerDomain?: string | null;
+
+    /**
+     * Size at which the icon is shown.
+     */
+    readonly size: AgentProjectIconSize;
+
+    /**
+     * Optional CSS class overrides.
+     */
+    readonly className?: string;
+};
+
+/**
+ * Renders the visual identity of one project — its favicon, or its initials as the fallback.
+ *
+ * The favicon is served from the project folder, which requires a signed-in visitor, so the
+ * initials are shown whenever the favicon is missing or cannot be loaded.
+ *
+ * @private component of Agent Projects dashboards
+ */
+export function AgentProjectIcon({
+    agentPermanentId,
+    project,
+    serverDomain = null,
+    currentServerDomain = null,
+    size,
+    className = '',
+}: AgentProjectIconProps) {
+    const [isFaviconBroken, setIsFaviconBroken] = useState(false);
+    const faviconImageRef = useRef<HTMLImageElement | null>(null);
+    const iconClassNames = AGENT_PROJECT_ICON_CLASS_NAMES_BY_SIZE[size];
+    const faviconHref = !project.faviconRelativePath
+        ? null
+        : buildAgentProjectFileHrefForServer({
+              agentPermanentId,
+              projectName: project.projectName,
+              fileRelativePath: project.faviconRelativePath,
+              serverDomain,
+              currentServerDomain,
+          });
+
+    useEffect(() => {
+        // Note: A favicon rendered on the server can already fail before this component is hydrated,
+        //       which loses its `error` event — an image which finished loading with no pixels is broken.
+        const faviconImage = faviconImageRef.current;
+        setIsFaviconBroken(faviconImage?.complete === true && faviconImage.naturalWidth === 0);
+    }, [faviconHref]);
+
+    return (
+        <span
+            className={`flex shrink-0 items-center justify-center overflow-hidden border border-blue-100 bg-blue-50 text-blue-700 ${iconClassNames.container} ${className}`}
+            aria-hidden
+        >
+            {faviconHref !== null && !isFaviconBroken ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    ref={faviconImageRef}
+                    src={faviconHref}
+                    alt=""
+                    className={`h-full w-full object-contain ${iconClassNames.favicon}`}
+                    onError={() => setIsFaviconBroken(true)}
+                />
+            ) : (
+                <span className={`font-bold leading-none ${iconClassNames.initials}`}>
+                    {createAgentProjectInitials(project.projectName)}
+                </span>
+            )}
+        </span>
+    );
+}