@promptbook/cli 0.113.0-4 → 0.113.0-8

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/AgentCodePageSection.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+/**
+ * Props for one page section card.
+ *
+ * @private type of `<AgentCodePageSection/>`
+ */
+type AgentCodePageSectionProps = {
+    /**
+     * Section heading shown above the content.
+     */
+    readonly title: string;
+
+    /**
+     * Supporting copy shown under the title.
+     */
+    readonly description: string;
+
+    /**
+     * Optional header actions rendered beside the title.
+     */
+    readonly actions?: ReactNode;
+
+    /**
+     * Main section content.
+     */
+    readonly children: ReactNode;
+};
+
+/**
+ * Shared card section used on the export-as-transpiled-code page.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function AgentCodePageSection({ title, description, actions, children }: AgentCodePageSectionProps) {
+    return (
+        <section className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+            <div className="flex flex-col gap-4 border-b border-slate-200 px-5 py-4 sm:flex-row sm:items-start sm:justify-between dark:border-slate-800">
+                <div className="min-w-0">
+                    <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
+                    <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">{description}</p>
+                </div>
+
+                {actions ? <div className="flex shrink-0 flex-wrap items-center gap-3">{actions}</div> : null}
+            </div>
+
+            <div className="p-5">{children}</div>
+        </section>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/GeneratedCodePreview.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { MonacoEditorWithShadowDom } from '../../../../components/_utils/MonacoEditorWithShadowDom';
+import { getTranspiledCodeFileMetadata } from '../../../../utils/transpilers/getTranspiledCodeFileMetadata';
+import type { Transpiler } from './Transpiler';
+
+/**
+ * Props for the generated code preview.
+ *
+ * @private type of `<GeneratedCodePreview/>`
+ */
+type GeneratedCodePreviewProps = {
+    /**
+     * Currently selected transpiler, used for the preview heading.
+     */
+    readonly selectedTranspiler: Transpiler | null;
+
+    /**
+     * Currently selected transpiler name, used to resolve the editor language.
+     */
+    readonly selectedTranspilerName: string;
+
+    /**
+     * Generated harness code, or an empty string when there is nothing to show yet.
+     */
+    readonly transpiledCode: string;
+
+    /**
+     * Whether code generation is currently in progress.
+     */
+    readonly isTranspiling: boolean;
+
+    /**
+     * Whether a ZIP download is currently in progress.
+     */
+    readonly isDownloading: boolean;
+};
+
+/**
+ * Shows the generated harness code in a read-only Monaco editor, plus generation/download status.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function GeneratedCodePreview({
+    selectedTranspiler,
+    selectedTranspilerName,
+    transpiledCode,
+    isTranspiling,
+    isDownloading,
+}: GeneratedCodePreviewProps) {
+    const statusLabel = getGeneratedCodeStatusLabel(isTranspiling, isDownloading);
+
+    return (
+        <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-950">
+            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-4 py-3 dark:border-slate-700">
+                <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
+                    {selectedTranspiler?.title || 'Generated code'}
+                </h3>
+                {statusLabel ? (
+                    <div className="text-sm text-slate-500 dark:text-slate-400" role="status" aria-live="polite">
+                        {statusLabel}
+                    </div>
+                ) : null}
+            </div>
+
+            <div className="p-4">
+                {transpiledCode ? (
+                    <div className="h-[32rem] overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700">
+                        <MonacoEditorWithShadowDom
+                            value={transpiledCode}
+                            language={getTranspiledCodeFileMetadata(selectedTranspilerName).language}
+                            options={{
+                                readOnly: true,
+                                minimap: { enabled: false },
+                                fontSize: 14,
+                                lineNumbers: 'on',
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                wordWrap: 'on',
+                            }}
+                            loading={
+                                <div className="flex h-full items-center justify-center text-slate-500 dark:text-slate-400">
+                                    Loading editor...
+                                </div>
+                            }
+                        />
+                    </div>
+                ) : (
+                    <div className="py-12 text-center text-sm text-slate-500 dark:text-slate-400">
+                        {getGeneratedCodePlaceholderText(isTranspiling, selectedTranspilerName)}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Resolves the status label shown in the preview header while generating or downloading.
+ *
+ * @param isTranspiling - Whether code generation is in progress.
+ * @param isDownloading - Whether a ZIP download is in progress.
+ * @returns Status label, or `null` when neither action is running.
+ *
+ * @private function of `<GeneratedCodePreview/>`
+ */
+function getGeneratedCodeStatusLabel(isTranspiling: boolean, isDownloading: boolean): string | null {
+    if (isDownloading) {
+        return 'Preparing ZIP archive...';
+    }
+
+    if (isTranspiling) {
+        return 'Generating code...';
+    }
+
+    return null;
+}
+
+/**
+ * Resolves the placeholder text shown when there is no generated code yet.
+ *
+ * @param isTranspiling - Whether code generation is in progress.
+ * @param selectedTranspilerName - Currently selected transpiler name.
+ * @returns Placeholder text describing the current empty state.
+ *
+ * @private function of `<GeneratedCodePreview/>`
+ */
+function getGeneratedCodePlaceholderText(isTranspiling: boolean, selectedTranspilerName: string): string {
+    if (isTranspiling) {
+        return 'Generating code...';
+    }
+
+    if (selectedTranspilerName) {
+        return 'Generated code will appear here.';
+    }
+
+    return 'Select a transpiler to generate code.';
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/GeneratedHarnessSection.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { ChevronDownIcon, DownloadIcon } from 'lucide-react';
+import type { TranspiledAgentExportWarning } from '../../../../utils/transpilers/getTranspiledAgentExportWarnings';
+import { AgentCodePageSection } from './AgentCodePageSection';
+import { GeneratedCodePreview } from './GeneratedCodePreview';
+import { TranspiledCodeErrorBanner } from './TranspiledCodeErrorBanner';
+import { TranspiledCodeExportWarningBanner } from './TranspiledCodeExportWarningBanner';
+import type { AgentCodeExportState } from './useAgentCodeExportState';
+
+/**
+ * Props for the generated harness section.
+ *
+ * @private type of `<GeneratedHarnessSection/>`
+ */
+type GeneratedHarnessSectionProps = {
+    /**
+     * Export page state and actions.
+     */
+    readonly state: AgentCodeExportState;
+
+    /**
+     * Warnings about commitments that cannot be transpiled 1:1.
+     */
+    readonly exportWarnings: ReadonlyArray<TranspiledAgentExportWarning>;
+};
+
+/**
+ * Renders the transpiler picker, export warnings/errors, download action, and generated code preview.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function GeneratedHarnessSection({ state, exportWarnings }: GeneratedHarnessSectionProps) {
+    return (
+        <AgentCodePageSection
+            title="Generated Harness"
+            description="Generate runnable output from the current agent and download the source book plus transpiled harness as one ZIP archive."
+            actions={
+                <button
+                    type="button"
+                    onClick={() => void state.downloadTranspiledCode()}
+                    disabled={state.isDownloadButtonDisabled}
+                    className="inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                    <DownloadIcon className="h-4 w-4" />
+                    {state.downloadButtonLabel}
+                </button>
+            }
+        >
+            <div className="space-y-4">
+                <TranspiledCodeExportWarningBanner warnings={exportWarnings} />
+
+                <div>
+                    <label
+                        htmlFor="agent-code-transpiler"
+                        className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300"
+                    >
+                        Select transpiler
+                    </label>
+                    <div className="relative">
+                        <select
+                            id="agent-code-transpiler"
+                            value={state.selectedTranspilerName}
+                            onChange={(event) => state.selectTranspiler(event.target.value)}
+                            disabled={state.isPageLoading || state.transpilers.length === 0}
+                            className="w-full appearance-none rounded-md border border-slate-300 bg-white px-3 py-2 pr-9 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
+                        >
+                            {state.transpilers.length === 0 ? (
+                                <option value="">
+                                    {state.isPageLoading ? 'Loading transpilers...' : 'No transpilers available'}
+                                </option>
+                            ) : (
+                                state.transpilers.map((transpiler) => (
+                                    <option key={transpiler.name} value={transpiler.name}>
+                                        {transpiler.title}
+                                    </option>
+                                ))
+                            )}
+                        </select>
+                        <ChevronDownIcon className="pointer-events-none absolute right-3 top-2.5 h-4 w-4 text-slate-400" />
+                    </div>
+                </div>
+
+                <TranspiledCodeErrorBanner message={state.pageErrorMessage} />
+                <TranspiledCodeErrorBanner message={state.transpileErrorMessage} />
+                <TranspiledCodeErrorBanner message={state.downloadErrorMessage} />
+
+                <GeneratedCodePreview
+                    selectedTranspiler={state.selectedTranspiler}
+                    selectedTranspilerName={state.selectedTranspilerName}
+                    transpiledCode={state.transpiledCode}
+                    isTranspiling={state.isTranspiling}
+                    isDownloading={state.isDownloading}
+                />
+            </div>
+        </AgentCodePageSection>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/SourceBookSection.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { BookEditor } from '@promptbook-local/components';
+import type { string_book } from '@promptbook-local/types';
+import { PencilIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePromptbookTheme } from '../../../../components/ThemeMode/usePromptbookTheme';
+import { AgentCodePageSection } from './AgentCodePageSection';
+
+/**
+ * Props for the source-book section.
+ *
+ * @private type of `<SourceBookSection/>`
+ */
+type SourceBookSectionProps = {
+    /**
+     * Routed agent name.
+     */
+    readonly agentName: string;
+
+    /**
+     * Stored source book shown in the read-only Book viewer.
+     */
+    readonly agentSource: string_book;
+};
+
+/**
+ * Renders the read-only Book source viewer and the link to the dedicated Book editor.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function SourceBookSection({ agentName, agentSource }: SourceBookSectionProps) {
+    const { promptbookTheme } = usePromptbookTheme();
+
+    return (
+        <AgentCodePageSection
+            title="Source Book"
+            description="Review the stored Book source used to create this agent. Editing stays in the dedicated Book editor."
+            actions={
+                <Link
+                    href={`/agents/${encodeURIComponent(agentName)}/book`}
+                    className="inline-flex items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+                >
+                    <PencilIcon className="h-4 w-4" />
+                    Edit Book
+                </Link>
+            }
+        >
+            <div className="h-[28rem] overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
+                <BookEditor
+                    className="h-full w-full"
+                    height={null}
+                    value={agentSource}
+                    isReadonly
+                    isUploadButtonShown={false}
+                    isCameraButtonShown={false}
+                    isDownloadButtonShown={false}
+                    isAboutButtonShown={false}
+                    isFullscreenButtonShown={false}
+                    translations={{ readonlyMessage: 'Use Edit Book to change the source.' }}
+                    theme={promptbookTheme}
+                />
+            </div>
+        </AgentCodePageSection>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/TranspiledCodeErrorBanner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+/**
+ * Props for a single export error banner.
+ *
+ * @private type of `<TranspiledCodeErrorBanner/>`
+ */
+type TranspiledCodeErrorBannerProps = {
+    /**
+     * Error message to show, or `null`/empty to render nothing.
+     */
+    readonly message: string | null;
+};
+
+/**
+ * Renders a single red error banner, or nothing when there is no message.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function TranspiledCodeErrorBanner({ message }: TranspiledCodeErrorBannerProps) {
+    if (!message) {
+        return null;
+    }
+
+    return (
+        <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300">
+            {message}
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/TranspiledCodeExportWarningBanner.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { AlertTriangleIcon } from 'lucide-react';
+import type { TranspiledAgentExportWarning } from '../../../../utils/transpilers/getTranspiledAgentExportWarnings';
+
+/**
+ * Props for the export warning banner.
+ *
+ * @private type of `<TranspiledCodeExportWarningBanner/>`
+ */
+type TranspiledCodeExportWarningBannerProps = {
+    /**
+     * Non-transpilable commitment warnings computed for the current agent.
+     */
+    readonly warnings: ReadonlyArray<TranspiledAgentExportWarning>;
+};
+
+/**
+ * Renders a warning banner when the current agent uses commitments that cannot be exported 1:1.
+ *
+ * @private internal component of `<AgentCodePageClient/>`
+ */
+export function TranspiledCodeExportWarningBanner({ warnings }: TranspiledCodeExportWarningBannerProps) {
+    if (warnings.length === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-amber-950 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100"
+            role="alert"
+        >
+            <div className="flex items-start gap-3">
+                <AlertTriangleIcon className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
+                <div className="min-w-0">
+                    <p className="text-sm font-semibold">Some agent functionality cannot be transpiled exactly.</p>
+                    <p className="mt-1 text-sm text-amber-900/90 dark:text-amber-100/80">
+                        The exported code may not behave 1:1 with the live agent in Agents Server.
+                    </p>
+
+                    <ul className="mt-3 space-y-3">
+                        {warnings.map((warning) => (
+                            <li key={warning.commitmentName} className="flex gap-2">
+                                <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
+                                <div className="min-w-0">
+                                    <p className="text-sm font-medium">
+                                        <code className="rounded bg-amber-100 px-1 py-0.5 font-mono text-[0.85em] text-amber-950 dark:bg-amber-900/60 dark:text-amber-100">
+                                            {warning.commitmentName}
+                                        </code>
+                                    </p>
+                                    <p className="mt-1 text-sm text-amber-900/90 dark:text-amber-100/80">
+                                        {warning.description}
+                                    </p>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/export-as-transpiled-code/Transpiler.ts

@@ -0,0 +1,9 @@
+/**
+ * Type describing one selectable transpiler.
+ *
+ * @private type of `<AgentCodePageClient/>`
+ */
+export type Transpiler = {
+    readonly name: string;
+    readonly title: string;
+};