@promptbook/cli 0.113.0-9 → 0.114.0-0

package/apps/agents-server/src/app/pixel-agents-assets/[...assetPath]/route.ts

@@ -1,148 +0,0 @@
-import { existsSync } from 'fs';
-import { readFile } from 'fs/promises';
-import path from 'path';
-import { NextResponse } from 'next/server';
-
-/**
- * Ensures this route runs in the Node.js runtime where filesystem access is available.
- */
-export const runtime = 'nodejs';
-
-/**
- * Relative path from package root to the bundled webview assets directory.
- */
-const PIXEL_AGENTS_ASSETS_SUBPATH = path.join(
-    'dist',
-    'webview',
-    'assets',
-);
-
-/**
- * Candidate installation roots where `pixel-agents` can be located in this monorepo setup.
- */
-const PIXEL_AGENTS_PACKAGE_ROOT_CANDIDATES = [
-    path.resolve(process.cwd(), 'node_modules', 'pixel-agents'),
-    path.resolve(process.cwd(), '..', '..', 'node_modules', 'pixel-agents'),
-];
-
-/**
- * MIME types used by the lightweight asset proxy.
- */
-const CONTENT_TYPE_BY_EXTENSION: Record<string, string> = {
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.json': 'application/json; charset=utf-8',
-    '.css': 'text/css; charset=utf-8',
-    '.js': 'text/javascript; charset=utf-8',
-    '.ttf': 'font/ttf',
-};
-
-/**
- * Typed route params for catch-all asset path segments.
- */
-type PixelAgentsAssetRouteParams = {
-    assetPath: string[];
-};
-
-/**
- * Locates the absolute root directory that contains Pixel Agents assets.
- *
- * @returns Absolute assets root path or null when package is not installed.
- */
-function resolvePixelAgentsAssetsRoot(): string | null {
-    for (const packageRootCandidate of PIXEL_AGENTS_PACKAGE_ROOT_CANDIDATES) {
-        const assetsRootCandidate = path.join(packageRootCandidate, PIXEL_AGENTS_ASSETS_SUBPATH);
-        if (existsSync(assetsRootCandidate)) {
-            return assetsRootCandidate;
-        }
-    }
-
-    return null;
-}
-
-/**
- * Normalizes one catch-all route path into a safe relative file path.
- *
- * @param pathSegments - Catch-all path segments.
- * @returns Safe normalized relative path or null when invalid.
- */
-function normalizeSafeRelativePath(pathSegments: ReadonlyArray<string>): string | null {
-    if (pathSegments.length === 0) {
-        return null;
-    }
-
-    const normalizedPath = path.posix.normalize(pathSegments.join('/'));
-    if (normalizedPath.startsWith('../') || normalizedPath === '..' || normalizedPath.includes('/../')) {
-        return null;
-    }
-
-    return normalizedPath;
-}
-
-/**
- * Resolves a file content-type from its extension.
- *
- * @param filePath - Absolute file path to serve.
- * @returns MIME type header value.
- */
-function resolveContentType(filePath: string): string {
-    const extension = path.extname(filePath).toLowerCase();
-    return CONTENT_TYPE_BY_EXTENSION[extension] || 'application/octet-stream';
-}
-
-/**
- * Loads one asset file from Pixel Agents package data.
- *
- * @param relativePath - Normalized relative asset path under the package assets root.
- * @returns Binary payload and content type.
- */
-async function loadPixelAgentsAsset(relativePath: string): Promise<{ data: Buffer; contentType: string } | null> {
-    const assetsRoot = resolvePixelAgentsAssetsRoot();
-    if (!assetsRoot) {
-        return null;
-    }
-
-    const absolutePath = path.resolve(assetsRoot, relativePath);
-    const normalizedRoot = `${assetsRoot}${path.sep}`;
-    if (!absolutePath.startsWith(normalizedRoot)) {
-        return null;
-    }
-
-    try {
-        const data = await readFile(absolutePath);
-        return {
-            data,
-            contentType: resolveContentType(absolutePath),
-        };
-    } catch {
-        return null;
-    }
-}
-
-/**
- * Proxies selected Pixel Agents assets so the homepage pixel-office view can reuse package sprites.
- */
-export async function GET(
-    _request: Request,
-    { params }: { params: Promise<PixelAgentsAssetRouteParams> },
-): Promise<NextResponse> {
-    const { assetPath } = await params;
-    const relativePath = normalizeSafeRelativePath(assetPath);
-    if (!relativePath) {
-        return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
-    }
-
-    const asset = await loadPixelAgentsAsset(relativePath);
-    if (!asset) {
-        return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
-    }
-
-    return new NextResponse(asset.data, {
-        status: 200,
-        headers: {
-            'Content-Type': asset.contentType,
-            'Cache-Control': 'public, max-age=3600',
-        },
-    });
-}

package/apps/agents-server/src/components/Homepage/AgentGraphNode.tsx

@@ -1,78 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { NodeProps } from 'reactflow';
-import { AgentAvatar } from '../AgentAvatar/AgentAvatar';
-import type { AgentNodeData } from './buildGraphLayoutNodes';
-
-/**
- * Renders an agent node inside the React Flow canvas.
- *
- * @private function of AgentsGraph
- */
-export function AgentGraphNode({ data }: NodeProps<AgentNodeData>) {
-    const [imageSrc, setImageSrc] = useState(data.imageUrl);
-
-    useEffect(() => {
-        setImageSrc(data.imageUrl);
-    }, [data.imageUrl]);
-
-    /**
-     * Fall back to the generated placeholder avatar when image loading fails.
-     */
-    const handleImageError = () => {
-        if (imageSrc !== data.placeholderUrl) {
-            setImageSrc(data.placeholderUrl);
-        }
-    };
-
-    const highlightClass = data.isHighlighted
-        ? 'ring-2 ring-sky-400 shadow-lg'
-        : data.isNeighbor
-        ? 'ring-1 ring-sky-200'
-        : '';
-    const dimClass = data.isDimmed ? 'opacity-40' : 'opacity-100';
-
-    return (
-        <div
-            className={`agents-graph-node relative h-full w-full rounded-2xl border shadow-sm cursor-pointer transition-transform duration-200 ${highlightClass} ${dimClass}`}
-            style={{ backgroundColor: data.style.fill, borderColor: data.style.border, color: data.style.text }}
-            onClick={data.onOpen}
-            title={data.tooltip}
-        >
-            {data.orderIndex ? (
-                <div className="absolute top-1.5 right-1.5 rounded-full bg-white/80 px-2 py-0.5 text-[10px] font-semibold text-slate-600 shadow">
-                    {data.orderIndex}
-                </div>
-            ) : null}
-            <div className="flex h-full items-center gap-3 px-3">
-                <div
-                    className="flex h-9 w-9 items-center justify-center rounded-full border"
-                    style={{ borderColor: data.style.ring }}
-                >
-                    <div className="relative h-8 w-8 overflow-hidden rounded-full bg-white">
-                        {data.agent.meta.image ? (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img
-                                src={imageSrc}
-                                alt={data.name}
-                                className="agent-avatar-pixelated h-full w-full object-cover"
-                                onError={handleImageError}
-                            />
-                        ) : (
-                            <AgentAvatar
-                                agent={data.agent}
-                                baseUrl={data.agent.serverUrl}
-                                size={32}
-                                alt={data.name}
-                                className="h-full w-full"
-                            />
-                        )}
-                    </div>
-                </div>
-                <div className="min-w-0">
-                    <div className="text-sm font-semibold truncate">{data.name}</div>
-                    <div className="text-[11px] text-slate-600 truncate">{data.agent.agentName}</div>
-                </div>
-            </div>
-        </div>
-    );
-}

package/apps/agents-server/src/components/Homepage/AgentsGraph.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import { AgentsGraphCanvas } from './AgentsGraphCanvas';
-import { AgentsGraphToolbar } from './AgentsGraphToolbar';
-import { GraphSummaryPanel } from './GraphSummaryPanel';
-import { useAgentsGraphState } from './useAgentsGraphState';
-
-/**
- * Props for the AgentsGraph component.
- */
-type AgentsGraphProps = Parameters<typeof useAgentsGraphState>[0];
-
-/**
- * Render the AgentsGraph component.
- */
-export function AgentsGraph(props: AgentsGraphProps) {
-    const { canvas, emptyMessage, graphSummary, hasAnyAgents, toolbar } = useAgentsGraphState(props);
-
-    if (!hasAnyAgents) {
-        return <div className="flex justify-center py-12 text-gray-500">{emptyMessage}</div>;
-    }
-
-    return (
-        <div className="space-y-4">
-            <AgentsGraphToolbar {...toolbar} />
-            <GraphSummaryPanel summary={graphSummary} />
-            <AgentsGraphCanvas {...canvas} />
-        </div>
-    );
-}

package/apps/agents-server/src/components/Homepage/AgentsGraphCanvas.tsx

@@ -1,181 +0,0 @@
-import type { MouseEvent, MutableRefObject } from 'react';
-import ReactFlow, {
-    Background,
-    BackgroundVariant,
-    Controls,
-    MiniMap,
-    type Edge,
-    type Node,
-    type OnNodesChange,
-    type ReactFlowInstance,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
-import { GraphLoadingSkeleton } from '../Skeleton/GraphLoadingSkeleton';
-import { AgentGraphNode } from './AgentGraphNode';
-import { FolderGroupNode } from './FolderGroupNode';
-import { ServerGroupNode } from './ServerGroupNode';
-import type { AgentNodeData } from './buildGraphLayoutNodes';
-
-/**
- * Props for the graph canvas surface.
- *
- * @private function of AgentsGraph
- */
-type AgentsGraphCanvasProps = {
-    readonly emptyMessage: string;
-    readonly graphHeight: number;
-    readonly graphNodeCount: number;
-    readonly graphWrapperRef: MutableRefObject<HTMLDivElement | null>;
-    readonly isGraphCanvasReady: boolean;
-    readonly displayedNodes: Node[];
-    readonly displayedEdges: Edge[];
-    readonly onNodesChange: OnNodesChange;
-    readonly onFlowNodeClick: (_event: MouseEvent, node: Node) => void;
-    readonly onNodeHover: (node: Node | null) => void;
-    readonly onNodeDragStop: (_event: MouseEvent, node: Node) => void;
-    readonly onGraphInit: (instance: ReactFlowInstance) => void;
-};
-
-/**
- * Static node-type mapping used by React Flow.
- *
- * @private function of AgentsGraph
- */
-const GRAPH_NODE_TYPES = {
-    agent: AgentGraphNode,
-    serverGroup: ServerGroupNode,
-    folderGroup: FolderGroupNode,
-};
-
-/**
- * Legend item rendered in the graph corner.
- *
- * @private function of AgentsGraph
- */
-type GraphLegendItem = {
-    label: string;
-    lineClassName: string;
-};
-
-/**
- * Edge legend shown on top of the graph surface.
- *
- * @private function of AgentsGraph
- */
-const GRAPH_LEGEND_ITEMS: ReadonlyArray<GraphLegendItem> = [
-    { label: 'Parent', lineClassName: 'w-6 border-t-2 border-dashed border-sky-400' },
-    { label: 'Import', lineClassName: 'w-6 border-t-2 border-slate-400' },
-    { label: 'Team', lineClassName: 'w-6 border-t-4 border-emerald-400' },
-    { label: 'Folder order', lineClassName: 'w-6 border-t-2 border-dashed border-amber-400' },
-];
-
-/**
- * Resolve the color used by the React Flow minimap for one node.
- *
- * @private function of AgentsGraph
- */
-function getMiniMapNodeColor(node: Node): string {
-    if (node.type === 'agent') {
-        const nodeData = node.data as AgentNodeData;
-        return nodeData.style.fill;
-    }
-
-    if (node.type === 'serverGroup') {
-        return '#e2e8f0';
-    }
-
-    return '#f1f5f9';
-}
-
-/**
- * Render the small edge legend in the bottom-right corner.
- *
- * @private function of AgentsGraph
- */
-function AgentsGraphLegend() {
-    return (
-        <div
-            data-export-exclude="true"
-            className="absolute bottom-4 right-4 z-10 flex flex-col gap-2 text-[10px] rounded-lg border border-slate-200 bg-white/80 p-2 shadow-sm"
-        >
-            {GRAPH_LEGEND_ITEMS.map(({ label, lineClassName }) => (
-                <div key={label} className="flex items-center gap-2">
-                    <div className={lineClassName}></div>
-                    <span>{label}</span>
-                </div>
-            ))}
-        </div>
-    );
-}
-
-/**
- * Render the React Flow canvas and its empty/loading states.
- *
- * @private function of AgentsGraph
- */
-export function AgentsGraphCanvas(props: AgentsGraphCanvasProps) {
-    const {
-        emptyMessage,
-        graphHeight,
-        graphNodeCount,
-        graphWrapperRef,
-        isGraphCanvasReady,
-        displayedNodes,
-        displayedEdges,
-        onNodesChange,
-        onFlowNodeClick,
-        onNodeHover,
-        onNodeDragStop,
-        onGraphInit,
-    } = props;
-
-    return (
-        <div
-            className="agents-graph-surface relative overflow-hidden rounded-2xl border border-slate-200 shadow-inner"
-            style={{ height: graphHeight }}
-        >
-            {graphNodeCount === 0 ? (
-                <div className="flex justify-center py-12 text-gray-500">{emptyMessage}</div>
-            ) : (
-                <div
-                    ref={graphWrapperRef}
-                    className={`agents-graph-canvas h-full w-full ${isGraphCanvasReady ? 'opacity-100' : 'opacity-0'}`}
-                    role="presentation"
-                >
-                    <ReactFlow
-                        nodes={displayedNodes}
-                        edges={displayedEdges}
-                        nodeTypes={GRAPH_NODE_TYPES}
-                        onNodesChange={onNodesChange}
-                        onNodeClick={onFlowNodeClick}
-                        onNodeMouseEnter={(_, node) => onNodeHover(node)}
-                        onNodeMouseLeave={() => onNodeHover(null)}
-                        onNodeDragStop={onNodeDragStop}
-                        onInit={onGraphInit}
-                        fitView
-                        panOnScroll
-                        minZoom={0.2}
-                        maxZoom={2.5}
-                        snapToGrid
-                        snapGrid={[8, 8]}
-                        nodesConnectable={false}
-                        nodesDraggable
-                        className="agents-graph-flow"
-                    >
-                        <Background variant={BackgroundVariant.Dots} gap={28} size={1} color="rgba(148, 163, 184, 0.35)" />
-                        <MiniMap position="bottom-left" zoomable pannable nodeColor={getMiniMapNodeColor} />
-                        <Controls position="bottom-right" />
-                    </ReactFlow>
-                </div>
-            )}
-
-            {!isGraphCanvasReady && graphNodeCount > 0 && (
-                <div className="absolute inset-0 z-20">
-                    <GraphLoadingSkeleton isInset />
-                </div>
-            )}
-
-            <AgentsGraphLegend />
-        </div>
-    );
-}