@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -1,553 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import type { AgentOrganizationAgent, AgentOrganizationFolder } from '../../utils/agentOrganization/types';
-import { useAgentNaming } from '../AgentNaming/AgentNamingContext';
-import {
-    buildOfficeLayout,
-    type OfficeAgentVisual,
-    type OfficePoint,
-    type OfficeRoom,
-} from './buildOfficeLayout';
-import type { AgentWithVisibility } from './useFederatedAgents';
-
-/**
- * Path prefix used to proxy Pixel Agents bundled assets through this app.
- */
-const PIXEL_AGENTS_ASSETS_BASE_PATH = '/pixel-agents-assets';
-
-/**
- * Character sprites available in Pixel Agents asset bundle.
- */
-const PIXEL_AGENTS_CHARACTER_COUNT = 6;
-
-/**
- * Width of one character frame in the Pixel Agents sprite sheet.
- */
-const PIXEL_AGENT_FRAME_WIDTH = 16;
-
-/**
- * Height of one character frame in the Pixel Agents sprite sheet.
- */
-const PIXEL_AGENT_FRAME_HEIGHT = 32;
-
-/**
- * Number of animation frames per direction row.
- */
-const PIXEL_AGENT_FRAMES_PER_ROW = 7;
-
-/**
- * Number of direction rows stored in one character sprite sheet.
- */
-const PIXEL_AGENT_DIRECTION_ROW_COUNT = 3;
-
-/**
- * Rendering scale used for each character sprite.
- */
-const PIXEL_AGENT_RENDER_SCALE = 2;
-
-/**
- * Tile size used for floor pattern rendering.
- */
-const PIXEL_TILE_SIZE_PX = 16;
-
-/**
- * Conversion scale from office world units into rendered pixels.
- */
-const PIXEL_WORLD_SCALE = 0.86;
-
-/**
- * Minimum rendered scene width.
- */
-const PIXEL_SCENE_MIN_WIDTH = 980;
-
-/**
- * Minimum rendered scene height.
- */
-const PIXEL_SCENE_MIN_HEIGHT = 560;
-
-/**
- * Animation tick interval for character movement and frame updates.
- */
-const PIXEL_ANIMATION_INTERVAL_MS = 140;
-
-/**
- * Duration of one sprite animation frame.
- */
-const PIXEL_FRAME_DURATION_MS = 180;
-
-/**
- * Sprite row index used when the character is facing down.
- */
-const PIXEL_DIRECTION_ROW_DOWN = 0;
-
-/**
- * Sprite row index used when the character is facing up.
- */
-const PIXEL_DIRECTION_ROW_UP = 1;
-
-/**
- * Sprite row index used when the character is facing right.
- */
-const PIXEL_DIRECTION_ROW_RIGHT = 2;
-
-/**
- * Prefix reserved for `toolbox` room identifiers generated by buildOfficeLayout.
- */
-const TOOLBOX_ROOM_ID_PREFIX = 'toolbox:';
-
-/**
- * Direction options supported by Pixel Agents sprites.
- */
-type PixelDirection = 'up' | 'down' | 'left' | 'right';
-
-/**
- * Prepared render model for one animated character.
- */
-type PixelAgentRenderModel = {
-    id: string;
-    name: string;
-    summary: string;
-    defaultHref: string;
-    state: OfficeAgentVisual['state'];
-    isRemote: boolean;
-    left: number;
-    top: number;
-    spriteUrl: string;
-    frameIndex: number;
-    spriteRowIndex: number;
-    mirrorHorizontally: boolean;
-};
-
-/**
- * Props for the pixel-office homepage visualization.
- */
-type AgentsPixelOfficeProps = {
-    agents: ReadonlyArray<AgentOrganizationAgent>;
-    federatedAgents: ReadonlyArray<AgentWithVisibility>;
-    publicUrl: string;
-    folders: ReadonlyArray<AgentOrganizationFolder>;
-};
-
-/**
- * Converts one world-space coordinate to rendered pixel space.
- *
- * @param value - World coordinate value.
- * @returns Rounded rendered pixel coordinate.
- */
-function worldToPixel(value: number): number {
-    return Math.round(value * PIXEL_WORLD_SCALE);
-}
-
-/**
- * Generates a deterministic hash for stable avatar/sprite assignment.
- *
- * @param value - Arbitrary string identifier.
- * @returns Positive deterministic hash.
- */
-function hashText(value: string): number {
-    let hash = 0;
-    for (let index = 0; index < value.length; index++) {
-        hash = (hash << 5) - hash + value.charCodeAt(index);
-        hash |= 0;
-    }
-    return Math.abs(hash);
-}
-
-/**
- * Returns one Pixel Agents character sprite path for an identifier.
- *
- * @param identifier - Agent identifier used for deterministic sprite selection.
- * @returns Relative URL to the proxy-served sprite sheet.
- */
-function resolveCharacterSpriteUrl(identifier: string): string {
-    const spriteIndex = hashText(identifier) % PIXEL_AGENTS_CHARACTER_COUNT;
-    return `${PIXEL_AGENTS_ASSETS_BASE_PATH}/characters/char_${spriteIndex}.png`;
-}
-
-/**
- * Resolves one room floor color based on room kind and assigned room accent.
- *
- * @param room - Room model from office layout.
- * @returns Hex-like CSS color string.
- */
-function resolveRoomFloorColor(room: OfficeRoom): string {
-    if (room.kind === 'head-office') {
-        return '#3d6385';
-    }
-    if (room.kind === 'remote') {
-        return '#6f8faa';
-    }
-    if (room.kind === 'folder') {
-        return '#9a6735';
-    }
-    return room.color || '#8d5b32';
-}
-
-/**
- * Formats one small room subtitle shown in the scene labels.
- *
- * @param room - Room descriptor.
- * @returns Compact subtitle text.
- */
-function resolveRoomSubtitle(room: OfficeRoom): string {
-    if (room.kind === 'head-office') {
-        return 'Head Office';
-    }
-    if (room.kind === 'remote') {
-        return 'Remote Team';
-    }
-    if (room.id.startsWith(TOOLBOX_ROOM_ID_PREFIX)) {
-        return 'Toolbox';
-    }
-    return room.subtitle;
-}
-
-/**
- * Interpolates between two points.
- *
- * @param from - Start point.
- * @param to - End point.
- * @param progress - Value from 0..1.
- * @returns Interpolated point.
- */
-function interpolatePoint(from: OfficePoint, to: OfficePoint, progress: number): OfficePoint {
-    return {
-        x: from.x + (to.x - from.x) * progress,
-        y: from.y + (to.y - from.y) * progress,
-    };
-}
-
-/**
- * Computes one animated scene position for an agent.
- *
- * @param agent - Agent visual record.
- * @param animationClockMs - Current animation clock in milliseconds.
- * @returns Scene point in world coordinates.
- */
-function resolveAgentPoint(agent: OfficeAgentVisual, animationClockMs: number): OfficePoint {
-    if (agent.state !== 'moving' || !agent.path) {
-        return agent.position;
-    }
-
-    const pathDelayMs = Math.max(0, agent.path.delayMs);
-    const pathDurationMs = Math.max(1, agent.path.durationMs);
-    const loopDurationMs = pathDelayMs + pathDurationMs;
-    const phaseMs = (animationClockMs + (agent.seed % loopDurationMs)) % loopDurationMs;
-
-    if (phaseMs <= pathDelayMs) {
-        return agent.path.from;
-    }
-
-    const walkProgress = Math.min(1, (phaseMs - pathDelayMs) / pathDurationMs);
-    return interpolatePoint(agent.path.from, agent.path.to, walkProgress);
-}
-
-/**
- * Resolves one display direction for an agent sprite.
- *
- * @param agent - Agent visual record.
- * @returns Direction used for sprite row and optional mirroring.
- */
-function resolveAgentDirection(agent: OfficeAgentVisual): PixelDirection {
-    if (agent.state === 'moving' && agent.path) {
-        const deltaX = agent.path.to.x - agent.path.from.x;
-        const deltaY = agent.path.to.y - agent.path.from.y;
-        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-            return deltaX >= 0 ? 'right' : 'left';
-        }
-        return deltaY >= 0 ? 'down' : 'up';
-    }
-
-    if (agent.state === 'working') {
-        return 'down';
-    }
-
-    if (agent.state === 'meeting') {
-        return agent.seed % 2 === 0 ? 'left' : 'right';
-    }
-
-    return agent.seed % 2 === 0 ? 'right' : 'left';
-}
-
-/**
- * Resolves one sprite-sheet row index for a direction.
- *
- * @param direction - Character facing direction.
- * @returns Sprite row index.
- */
-function resolveSpriteRowIndex(direction: PixelDirection): number {
-    if (direction === 'up') {
-        return PIXEL_DIRECTION_ROW_UP;
-    }
-
-    if (direction === 'down') {
-        return PIXEL_DIRECTION_ROW_DOWN;
-    }
-
-    return PIXEL_DIRECTION_ROW_RIGHT;
-}
-
-/**
- * Resolves one animation frame index for an agent state.
- *
- * @param agent - Agent visual record.
- * @param animationClockMs - Current animation clock in milliseconds.
- * @returns Frame index in sprite sheet range 0..6.
- */
-function resolveSpriteFrameIndex(agent: OfficeAgentVisual, animationClockMs: number): number {
-    const frameTick = Math.floor(animationClockMs / PIXEL_FRAME_DURATION_MS);
-
-    if (agent.state === 'moving') {
-        const walkFrames = [1, 2, 3, 4];
-        return walkFrames[frameTick % walkFrames.length]!;
-    }
-
-    if (agent.state === 'working') {
-        const workFrames = [0, 5];
-        return workFrames[frameTick % workFrames.length]!;
-    }
-
-    if (agent.state === 'meeting') {
-        return frameTick % 2 === 0 ? 0 : 6;
-    }
-
-    return 0;
-}
-
-/**
- * Builds one render-ready scene model for all agents.
- *
- * @param agents - Visual agents from the office layout.
- * @param animationClockMs - Current animation clock in milliseconds.
- * @returns Render-ready pixel scene models.
- */
-function createPixelAgentRenderModels(
-    agents: ReadonlyArray<OfficeAgentVisual>,
-    animationClockMs: number,
-): Array<PixelAgentRenderModel> {
-    const spriteWidthPx = PIXEL_AGENT_FRAME_WIDTH * PIXEL_AGENT_RENDER_SCALE;
-    const spriteHeightPx = PIXEL_AGENT_FRAME_HEIGHT * PIXEL_AGENT_RENDER_SCALE;
-
-    return agents.map((agent) => {
-        const point = resolveAgentPoint(agent, animationClockMs);
-        const direction = resolveAgentDirection(agent);
-        const frameIndex = resolveSpriteFrameIndex(agent, animationClockMs);
-        const spriteRowIndex = resolveSpriteRowIndex(direction);
-        const mirrorHorizontally = direction === 'left';
-        const left = worldToPixel(point.x) - Math.floor(spriteWidthPx / 2);
-        const top = worldToPixel(point.y) - Math.floor(spriteHeightPx * 0.82);
-
-        return {
-            id: agent.id,
-            name: agent.agent.agentName,
-            summary: agent.summaryText,
-            defaultHref: agent.defaultHref,
-            state: agent.state,
-            isRemote: agent.isRemote,
-            left,
-            top,
-            spriteUrl: resolveCharacterSpriteUrl(agent.id),
-            frameIndex,
-            spriteRowIndex,
-            mirrorHorizontally,
-        };
-    });
-}
-
-/**
- * Renders the pixel-office homepage view using Pixel Agents sprites.
- */
-export function AgentsPixelOffice(props: AgentsPixelOfficeProps) {
-    const { agents, federatedAgents, publicUrl, folders } = props;
-    const router = useRouter();
-    const { formatText } = useAgentNaming();
-    const [animationClockMs, setAnimationClockMs] = useState(() => Date.now());
-
-    const layout = useMemo(
-        () =>
-            buildOfficeLayout({
-                agents,
-                federatedAgents,
-                publicUrl,
-                folders,
-            }),
-        [agents, federatedAgents, publicUrl, folders],
-    );
-
-    useEffect(() => {
-        const intervalId = window.setInterval(() => {
-            setAnimationClockMs(Date.now());
-        }, PIXEL_ANIMATION_INTERVAL_MS);
-
-        return () => {
-            window.clearInterval(intervalId);
-        };
-    }, []);
-
-    const sceneWidthPx = Math.max(PIXEL_SCENE_MIN_WIDTH, worldToPixel(layout.worldWidth));
-    const sceneHeightPx = Math.max(PIXEL_SCENE_MIN_HEIGHT, worldToPixel(layout.worldHeight));
-    const agentRenderModels = useMemo(
-        () => createPixelAgentRenderModels(layout.agents, animationClockMs),
-        [layout.agents, animationClockMs],
-    );
-
-    /**
-     * Opens one local or remote agent-entry URL from the pixel-office scene.
-     *
-     * @param href - Local route or remote absolute URL.
-     */
-    const openProfile = (href: string): void => {
-        if (/^https?:\/\//.test(href)) {
-            window.open(href, '_blank', 'noopener,noreferrer');
-            return;
-        }
-        router.push(href);
-    };
-
-    if (layout.agents.length === 0) {
-        return (
-            <div className="flex justify-center py-12 text-gray-500">
-                {formatText('No agents to show in pixel office.')}
-            </div>
-        );
-    }
-
-    const spriteWidthPx = PIXEL_AGENT_FRAME_WIDTH * PIXEL_AGENT_RENDER_SCALE;
-    const spriteHeightPx = PIXEL_AGENT_FRAME_HEIGHT * PIXEL_AGENT_RENDER_SCALE;
-    const spriteSheetWidthPx =
-        PIXEL_AGENT_FRAME_WIDTH * PIXEL_AGENT_FRAMES_PER_ROW * PIXEL_AGENT_RENDER_SCALE;
-    const spriteSheetHeightPx =
-        PIXEL_AGENT_FRAME_HEIGHT * PIXEL_AGENT_DIRECTION_ROW_COUNT * PIXEL_AGENT_RENDER_SCALE;
-
-    return (
-        <div className="w-full overflow-x-auto rounded-xl border border-slate-300 bg-slate-950 p-3">
-            <div
-                className="relative mx-auto overflow-hidden rounded-lg border border-slate-700"
-                style={{
-                    width: sceneWidthPx,
-                    height: sceneHeightPx,
-                }}
-            >
-                <div
-                    className="absolute inset-0"
-                    style={{
-                        backgroundColor: '#1e2f45',
-                        backgroundImage:
-                            'linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)',
-                        backgroundSize: `${PIXEL_TILE_SIZE_PX}px ${PIXEL_TILE_SIZE_PX}px`,
-                    }}
-                />
-
-                {layout.rooms.map((room) => {
-                    const roomLeft = worldToPixel(room.x);
-                    const roomTop = worldToPixel(room.y);
-                    const roomWidth = worldToPixel(room.width);
-                    const roomHeight = worldToPixel(room.depth);
-                    const roomFloorColor = resolveRoomFloorColor(room);
-
-                    return (
-                        <div
-                            key={room.id}
-                            className="absolute overflow-hidden border-2 border-slate-800 shadow-[0_0_0_1px_rgba(0,0,0,0.25)]"
-                            style={{
-                                left: roomLeft,
-                                top: roomTop,
-                                width: roomWidth,
-                                height: roomHeight,
-                                backgroundColor: roomFloorColor,
-                                imageRendering: 'pixelated',
-                            }}
-                        >
-                            <div
-                                className="absolute inset-0 opacity-20"
-                                style={{
-                                    backgroundImage: `url(${PIXEL_AGENTS_ASSETS_BASE_PATH}/walls.png)`,
-                                    backgroundSize: '64px 128px',
-                                }}
-                            />
-                            <div
-                                className="pointer-events-none absolute inset-0"
-                                style={{
-                                    backgroundImage:
-                                        'linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)',
-                                    backgroundSize: `${PIXEL_TILE_SIZE_PX}px ${PIXEL_TILE_SIZE_PX}px`,
-                                }}
-                            />
-                            <div className="absolute left-2 top-2 rounded bg-black/60 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-100">
-                                {room.label}
-                            </div>
-                            <div className="absolute left-2 top-8 rounded bg-black/45 px-1.5 py-0.5 text-[10px] text-slate-200">
-                                {resolveRoomSubtitle(room)}
-                            </div>
-                        </div>
-                    );
-                })}
-
-                {layout.desks.map((desk) => {
-                    const deskLeft = worldToPixel(desk.x - desk.width / 2);
-                    const deskTop = worldToPixel(desk.y - desk.depth / 2);
-                    const deskWidth = worldToPixel(desk.width);
-                    const deskHeight = worldToPixel(desk.depth);
-
-                    return (
-                        <div
-                            key={desk.id}
-                            className="absolute border-2 border-amber-950 bg-amber-700"
-                            style={{
-                                left: deskLeft,
-                                top: deskTop,
-                                width: deskWidth,
-                                height: deskHeight,
-                                boxShadow: desk.isRemote
-                                    ? '0 0 0 2px rgba(96,165,250,0.45)'
-                                    : '0 0 0 1px rgba(0,0,0,0.35)',
-                            }}
-                        >
-                            <div className="absolute left-1 top-1 h-2 w-3 rounded-sm border border-slate-900 bg-slate-300" />
-                        </div>
-                    );
-                })}
-
-                {agentRenderModels.map((agent) => (
-                    <button
-                        key={agent.id}
-                        type="button"
-                        onClick={() => openProfile(agent.defaultHref)}
-                        className="absolute flex flex-col items-center bg-transparent p-0 text-left"
-                        style={{
-                            left: agent.left,
-                            top: agent.top,
-                            width: spriteWidthPx,
-                            height: spriteHeightPx + 22,
-                        }}
-                        title={`${agent.name} - ${agent.summary}`}
-                        aria-label={`Open ${agent.name}`}
-                    >
-                        <span
-                            className="block"
-                            style={{
-                                width: spriteWidthPx,
-                                height: spriteHeightPx,
-                                backgroundImage: `url(${agent.spriteUrl})`,
-                                backgroundSize: `${spriteSheetWidthPx}px ${spriteSheetHeightPx}px`,
-                                backgroundPosition: `-${
-                                    agent.frameIndex * PIXEL_AGENT_FRAME_WIDTH * PIXEL_AGENT_RENDER_SCALE
-                                }px -${
-                                    agent.spriteRowIndex * PIXEL_AGENT_FRAME_HEIGHT * PIXEL_AGENT_RENDER_SCALE
-                                }px`,
-                                imageRendering: 'pixelated',
-                                transform: agent.mirrorHorizontally ? 'scaleX(-1)' : undefined,
-                                filter: agent.isRemote ? 'saturate(0.9) brightness(1.05)' : undefined,
-                            }}
-                        />
-                        <span className="mt-1 rounded bg-black/65 px-1.5 py-0.5 text-[10px] font-semibold text-slate-100">
-                            {agent.name}
-                        </span>
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
-}

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

@@ -1,20 +0,0 @@
-import { useAgentNaming } from '../AgentNaming/AgentNamingContext';
-import type { NodeProps } from 'reactflow';
-import type { FolderGroupNodeData } from './buildGraphLayoutNodes';
-
-/**
- * Renders a folder group container.
- *
- * @private function of AgentsGraph
- */
-export function FolderGroupNode({ data }: NodeProps<FolderGroupNodeData>) {
-    const { formatText } = useAgentNaming();
-    const countLabel = formatText(`${data.agentCount} agents`);
-
-    return (
-        <div className="relative h-full w-full rounded-2xl border border-slate-200 bg-white/80 shadow-sm">
-            <div className="absolute left-3 top-2 text-xs font-semibold text-slate-500">{data.label}</div>
-            <div className="absolute right-3 top-2 text-[10px] text-slate-400">{countLabel}</div>
-        </div>
-    );
-}

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

@@ -1,99 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { ConnectionType, GraphSummaryInfo } from './buildGraphData';
-import { CONNECTION_TYPES, EDGE_LABELS, EDGE_STYLES } from './buildGraphData';
-
-/**
- * Props for the graph summary card.
- */
-type GraphSummaryCardProps = {
-    readonly label: string;
-    readonly value: number;
-    readonly helperText?: string;
-};
-
-/**
- * Simple stat card used inside the overview panel.
- */
-function GraphSummaryCard({ label, value, helperText }: GraphSummaryCardProps) {
-    return (
-        <div className="flex flex-col justify-between rounded-2xl border border-slate-200 bg-slate-50/60 px-4 py-3 shadow-sm">
-            <div className="text-3xl font-semibold leading-tight text-slate-900 tabular-nums">{value}</div>
-            <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{label}</div>
-            {helperText ? <p className="mt-1 text-[10px] font-medium text-slate-400">{helperText}</p> : null}
-        </div>
-    );
-}
-
-/**
- * Props for the connection legend list.
- */
-type GraphConnectionLegendProps = {
-    readonly connectionCountByType: Record<ConnectionType, number>;
-};
-
-/**
- * Displays connection counts for each link type with color cues.
- */
-function GraphConnectionLegend({ connectionCountByType }: GraphConnectionLegendProps) {
-    return (
-        <div className="mt-3 grid gap-2 md:grid-cols-3">
-            {CONNECTION_TYPES.map((type) => {
-                const style: CSSProperties = {
-                    borderBottomWidth: 2,
-                    borderBottomStyle: EDGE_STYLES[type].dash ? 'dashed' : 'solid',
-                    borderBottomColor: EDGE_STYLES[type].color,
-                    width: 36,
-                    display: 'inline-block',
-                };
-
-                return (
-                    <div
-                        key={type}
-                        className="flex items-center justify-between rounded-xl border border-slate-200 bg-white/70 px-3 py-2 text-[11px] text-slate-600 shadow-sm"
-                    >
-                        <div className="flex items-center gap-2">
-                            <span className="inline-block" style={style}></span>
-                            <span className="font-semibold text-slate-700">{EDGE_LABELS[type]}</span>
-                        </div>
-                        <span className="text-sm font-semibold text-slate-900">{connectionCountByType[type]}</span>
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
-
-/**
- * Props for the graph summary overview panel.
- */
-type GraphSummaryPanelProps = {
-    readonly summary: GraphSummaryInfo;
-};
-
-/**
- * Overview UI displayed above the graph that surfaces top-level metrics.
- *
- * @private function of AgentsGraph
- */
-export function GraphSummaryPanel({ summary }: GraphSummaryPanelProps) {
-    const cards = [
-        { label: 'Visible agents', value: summary.agentCount },
-        { label: 'Servers represented', value: summary.serverCount },
-        { label: 'Explicit connections', value: summary.totalConnections, helperText: 'Inheritance / Import / Team' },
-        { label: 'Folder order links', value: summary.orderLinkCount },
-    ];
-
-    return (
-        <div className="space-y-2 rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
-            <div className="grid gap-3 md:grid-cols-4">
-                {cards.map((card) => (
-                    <GraphSummaryCard key={card.label} {...card} />
-                ))}
-            </div>
-            <div>
-                <p className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Connections by type</p>
-                <GraphConnectionLegend connectionCountByType={summary.connectionCountByType} />
-            </div>
-        </div>
-    );
-}