@burdenoff/microfe-botmanor 2026.1027.2 → 2026.1027.3

package/dist/botlit/pages/PromptStudioPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptStudioPage.js","names":[],"sources":["../../../src/botlit/pages/PromptStudioPage.tsx"],"sourcesContent":["/**\n * Prompt Studio Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Plus, Play, Tag } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, Textarea, FormField } from '../components/Input';\nimport { Badge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  usePromptTemplates,\n  useRenderPromptTemplate,\n  promptTemplateVariables,\n  type PromptTemplateRecord,\n} from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { PromptVariable } from '../types';\n\n/** Normalises one entry of a template's free-form `variables` JSON. */\nfunction toPromptVariable(value: unknown): PromptVariable | null {\n  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;\n  const record = value as Record<string, unknown>;\n  const name = typeof record.name === 'string' ? record.name : undefined;\n  if (!name) return null;\n  const type = typeof record.type === 'string' ? record.type : 'string';\n  return {\n    name,\n    type: type as PromptVariable['type'],\n    description: typeof record.description === 'string' ? record.description : undefined,\n    required: record.required === true,\n    defaultValue: record.defaultValue,\n  };\n}\n\nfunction templateVariables(template: PromptTemplateRecord | undefined): PromptVariable[] {\n  if (!template) return [];\n  return promptTemplateVariables(template)\n    .map(toPromptVariable)\n    .filter((variable): variable is PromptVariable => variable !== null);\n}\n\nexport const PromptStudioPage: FC = () => {\n  const { navigateTo } = useBotlit();\n  const { data: templates, loading, error, refetch } = usePromptTemplates();\n  const { render, loading: isRunning } = useRenderPromptTemplate();\n\n  const [selectedPromptId, setSelectedPromptId] = useState<string | null>(null);\n  const [testVariables, setTestVariables] = useState<Record<string, string>>({});\n  const [testOutput, setTestOutput] = useState('');\n\n  // Select the first template once the list arrives.\n  useEffect(() => {\n    if (!selectedPromptId && templates.length > 0) {\n      setSelectedPromptId(templates[0].id);\n    }\n  }, [templates, selectedPromptId]);\n\n  const selectedPrompt = useMemo(\n    () => templates.find((template) => template.id === selectedPromptId),\n    [templates, selectedPromptId]\n  );\n\n  const selectedVariables = useMemo(() => templateVariables(selectedPrompt), [selectedPrompt]);\n\n  const handleTest = async () => {\n    if (!selectedPrompt) return;\n    try {\n      // Rendered by wspace-botlit-svc so the preview matches what the agent\n      // actually receives — never a client-side string substitution.\n      const output = await render({\n        templateId: selectedPrompt.id,\n        variables: testVariables,\n      });\n      setTestOutput(output);\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to render prompt');\n    }\n  };\n\n  return (\n    <PageLayout\n      title=\"Prompt Studio\"\n      description=\"Create, test, and manage prompts for your AI agents\"\n      actions={\n        <Button leftIcon={<Plus size={16} />} onClick={() => navigateTo('prompt-templates/new')}>\n          New Prompt\n        </Button>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Play size={18} />}>\n          Prompt Studio is your interactive workbench for writing and testing prompts before they go\n          live. Pick a prompt, edit its text and variables on the left, then fill in sample values\n          and hit Run Test to preview exactly what the agent will receive — so you can iterate on\n          wording and catch mistakes here instead of in production.\n        </PagePurpose>\n\n        <div className=\"grid grid-cols-12 gap-6\">\n          {/* Prompt List */}\n          <div className=\"col-span-3\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">Prompts</CardTitle>\n              </CardHeader>\n              <CardContent className=\"p-0\">\n                {loading ? (\n                  <div className=\"space-y-2 p-4\">\n                    {[1, 2, 3].map((i) => (\n                      <div\n                        key={i}\n                        className=\"h-14 bg-bg-sunken motion-safe:animate-vc-shimmer rounded\"\n                      />\n                    ))}\n                  </div>\n                ) : error ? (\n                  <ErrorState\n                    resource=\"prompt templates\"\n                    error={error}\n                    onRetry={() => void refetch()}\n                    className=\"m-4\"\n                  />\n                ) : templates.length === 0 ? (\n                  <p className=\"p-4 text-sm text-text-secondary\">\n                    No prompt templates yet. Create one to start iterating.\n                  </p>\n                ) : (\n                  <div className=\"divide-y divide-border-subtle\">\n                    {templates.map((prompt: PromptTemplateRecord) => (\n                      <button\n                        key={prompt.id}\n                        type=\"button\"\n                        className={`w-full text-left p-4 hover:bg-accent transition-colors ${\n                          selectedPrompt?.id === prompt.id ? 'bg-accent' : ''\n                        }`}\n                        onClick={() => {\n                          setSelectedPromptId(prompt.id);\n                          setTestVariables({});\n                          setTestOutput('');\n                        }}\n                      >\n                        <p className=\"font-medium truncate\">{prompt.name}</p>\n                        <p className=\"text-xs text-text-secondary mt-1 truncate\">\n                          v{prompt.version}\n                        </p>\n                        <div className=\"flex items-center gap-2 mt-2\">\n                          {prompt.visibility === 'PUBLIC' && (\n                            <Badge variant=\"secondary\" className=\"text-[10px]\">\n                              Public\n                            </Badge>\n                          )}\n                          <span className=\"text-xs text-text-secondary\">\n                            {templateVariables(prompt).length} vars\n                          </span>\n                        </div>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Editor */}\n          <div className=\"col-span-6\">\n            {selectedPrompt ? (\n              <GlassCard treatment=\"glass\" glow className=\"overflow-hidden\">\n                <CardHeader className=\"flex flex-row items-center justify-between\">\n                  <div>\n                    <CardTitle>{selectedPrompt.name}</CardTitle>\n                    <CardDescription>{selectedPrompt.description}</CardDescription>\n                  </div>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onClick={() => navigateTo(`prompt-templates/${selectedPrompt.id}`)}\n                  >\n                    Open template\n                  </Button>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  {/* Tags */}\n                  <div className=\"flex items-center gap-2\">\n                    <Tag size={14} className=\"text-text-secondary\" />\n                    {selectedPrompt.tags.map((tag) => (\n                      <Badge key={tag} variant=\"secondary\">\n                        {tag}\n                      </Badge>\n                    ))}\n                  </div>\n\n                  {/* Content */}\n                  <FormField label=\"Prompt Content\">\n                    <Textarea\n                      value={selectedPrompt.templateText}\n                      rows={15}\n                      readOnly\n                      className=\"font-mono text-sm\"\n                    />\n                  </FormField>\n\n                  {/* Variables */}\n                  {selectedVariables.length > 0 && (\n                    <div>\n                      <p className=\"text-sm font-medium mb-2\">Variables</p>\n                      <div className=\"space-y-2\">\n                        {selectedVariables.map((variable: PromptVariable) => (\n                          <div\n                            key={variable.name}\n                            className=\"flex items-center gap-4 p-3 bg-bg-sunken rounded-lg\"\n                          >\n                            <div className=\"flex-1\">\n                              <p className=\"font-medium text-sm\">\n                                {`{{${variable.name}}}`}\n                                {variable.required && (\n                                  <span className=\"text-status-error-text ml-1\">*</span>\n                                )}\n                              </p>\n                              {variable.description && (\n                                <p className=\"text-xs text-text-secondary\">\n                                  {variable.description}\n                                </p>\n                              )}\n                            </div>\n                            <Badge variant=\"outline\" className=\"capitalize\">\n                              {variable.type}\n                            </Badge>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n\n                  <div className=\"pt-4 text-xs text-text-secondary\">\n                    Updated {formatRelativeTime(selectedPrompt.updatedAt)}\n                  </div>\n                </CardContent>\n              </GlassCard>\n            ) : (\n              <EmptyState\n                illustration=\"onboarding\"\n                title=\"Select a prompt\"\n                description=\"Choose a prompt from the list to view and edit\"\n              />\n            )}\n          </div>\n\n          {/* Test Panel */}\n          <div className=\"col-span-3\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base flex items-center gap-2\">\n                  <Play size={16} />\n                  Test Prompt\n                </CardTitle>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                {selectedVariables.map((variable: PromptVariable) => (\n                  <FormField key={variable.name} label={variable.name}>\n                    <Input\n                      placeholder={variable.description || `Enter ${variable.name}`}\n                      value={testVariables[variable.name] || ''}\n                      onChange={(e) =>\n                        setTestVariables({ ...testVariables, [variable.name]: e.target.value })\n                      }\n                    />\n                  </FormField>\n                ))}\n\n                <Button\n                  className=\"w-full\"\n                  onClick={() => void handleTest()}\n                  isLoading={isRunning}\n                  disabled={!selectedPrompt}\n                >\n                  Run Test\n                </Button>\n\n                {testOutput && (\n                  <div>\n                    <p className=\"text-sm font-medium mb-2\">Output</p>\n                    <div className=\"p-3 bg-bg-sunken rounded-lg text-sm whitespace-pre-wrap font-mono max-h-64 overflow-auto\">\n                      {testOutput}\n                    </div>\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PromptStudioPage.js","names":[],"sources":["../../../src/botlit/pages/PromptStudioPage.tsx"],"sourcesContent":["/**\n * Prompt Studio Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Plus, Play, Tag } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input, Textarea, FormField } from '../components/Input';\nimport { Badge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  usePromptTemplates,\n  useRenderPromptTemplate,\n  promptTemplateVariables,\n  type PromptTemplateRecord,\n} from '../hooks';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { PromptVariable } from '../types';\nimport { BOTMANOR_PERMISSIONS, BotmanorPermissionGate } from '../permissions';\n\n/** Normalises one entry of a template's free-form `variables` JSON. */\nfunction toPromptVariable(value: unknown): PromptVariable | null {\n  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;\n  const record = value as Record<string, unknown>;\n  const name = typeof record.name === 'string' ? record.name : undefined;\n  if (!name) return null;\n  const type = typeof record.type === 'string' ? record.type : 'string';\n  return {\n    name,\n    type: type as PromptVariable['type'],\n    description: typeof record.description === 'string' ? record.description : undefined,\n    required: record.required === true,\n    defaultValue: record.defaultValue,\n  };\n}\n\nfunction templateVariables(template: PromptTemplateRecord | undefined): PromptVariable[] {\n  if (!template) return [];\n  return promptTemplateVariables(template)\n    .map(toPromptVariable)\n    .filter((variable): variable is PromptVariable => variable !== null);\n}\n\nexport const PromptStudioPage: FC = () => {\n  const { navigateTo } = useBotlit();\n  const { data: templates, loading, error, refetch } = usePromptTemplates();\n  const { render, loading: isRunning } = useRenderPromptTemplate();\n\n  const [selectedPromptId, setSelectedPromptId] = useState<string | null>(null);\n  const [testVariables, setTestVariables] = useState<Record<string, string>>({});\n  const [testOutput, setTestOutput] = useState('');\n\n  // Select the first template once the list arrives.\n  useEffect(() => {\n    if (!selectedPromptId && templates.length > 0) {\n      setSelectedPromptId(templates[0].id);\n    }\n  }, [templates, selectedPromptId]);\n\n  const selectedPrompt = useMemo(\n    () => templates.find((template) => template.id === selectedPromptId),\n    [templates, selectedPromptId]\n  );\n\n  const selectedVariables = useMemo(() => templateVariables(selectedPrompt), [selectedPrompt]);\n\n  const handleTest = async () => {\n    if (!selectedPrompt) return;\n    try {\n      // Rendered by wspace-botlit-svc so the preview matches what the agent\n      // actually receives — never a client-side string substitution.\n      const output = await render({\n        templateId: selectedPrompt.id,\n        variables: testVariables,\n      });\n      setTestOutput(output);\n    } catch (err) {\n      toast.error(err instanceof Error ? err.message : 'Failed to render prompt');\n    }\n  };\n\n  return (\n    <PageLayout\n      title=\"Prompt Studio\"\n      description=\"Create, test, and manage prompts for your AI agents\"\n      actions={\n        <BotmanorPermissionGate permission={BOTMANOR_PERMISSIONS.PROMPT_TEMPLATE_CREATE}>\n          <Button leftIcon={<Plus size={16} />} onClick={() => navigateTo('prompt-templates/new')}>\n            New Prompt\n          </Button>\n        </BotmanorPermissionGate>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<Play size={18} />}>\n          Prompt Studio is your interactive workbench for writing and testing prompts before they go\n          live. Pick a prompt, edit its text and variables on the left, then fill in sample values\n          and hit Run Test to preview exactly what the agent will receive — so you can iterate on\n          wording and catch mistakes here instead of in production.\n        </PagePurpose>\n\n        <div className=\"grid grid-cols-12 gap-6\">\n          {/* Prompt List */}\n          <div className=\"col-span-3\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base\">Prompts</CardTitle>\n              </CardHeader>\n              <CardContent className=\"p-0\">\n                {loading ? (\n                  <div className=\"space-y-2 p-4\">\n                    {[1, 2, 3].map((i) => (\n                      <div\n                        key={i}\n                        className=\"h-14 bg-bg-sunken motion-safe:animate-vc-shimmer rounded\"\n                      />\n                    ))}\n                  </div>\n                ) : error ? (\n                  <ErrorState\n                    resource=\"prompt templates\"\n                    error={error}\n                    onRetry={() => void refetch()}\n                    className=\"m-4\"\n                  />\n                ) : templates.length === 0 ? (\n                  <p className=\"p-4 text-sm text-text-secondary\">\n                    No prompt templates yet. Create one to start iterating.\n                  </p>\n                ) : (\n                  <div className=\"divide-y divide-border-subtle\">\n                    {templates.map((prompt: PromptTemplateRecord) => (\n                      <button\n                        key={prompt.id}\n                        type=\"button\"\n                        className={`w-full text-left p-4 hover:bg-accent transition-colors ${\n                          selectedPrompt?.id === prompt.id ? 'bg-accent' : ''\n                        }`}\n                        onClick={() => {\n                          setSelectedPromptId(prompt.id);\n                          setTestVariables({});\n                          setTestOutput('');\n                        }}\n                      >\n                        <p className=\"font-medium truncate\">{prompt.name}</p>\n                        <p className=\"text-xs text-text-secondary mt-1 truncate\">\n                          v{prompt.version}\n                        </p>\n                        <div className=\"flex items-center gap-2 mt-2\">\n                          {prompt.visibility === 'PUBLIC' && (\n                            <Badge variant=\"secondary\" className=\"text-[10px]\">\n                              Public\n                            </Badge>\n                          )}\n                          <span className=\"text-xs text-text-secondary\">\n                            {templateVariables(prompt).length} vars\n                          </span>\n                        </div>\n                      </button>\n                    ))}\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n\n          {/* Editor */}\n          <div className=\"col-span-6\">\n            {selectedPrompt ? (\n              <GlassCard treatment=\"glass\" glow className=\"overflow-hidden\">\n                <CardHeader className=\"flex flex-row items-center justify-between\">\n                  <div>\n                    <CardTitle>{selectedPrompt.name}</CardTitle>\n                    <CardDescription>{selectedPrompt.description}</CardDescription>\n                  </div>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    onClick={() => navigateTo(`prompt-templates/${selectedPrompt.id}`)}\n                  >\n                    Open template\n                  </Button>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  {/* Tags */}\n                  <div className=\"flex items-center gap-2\">\n                    <Tag size={14} className=\"text-text-secondary\" />\n                    {selectedPrompt.tags.map((tag) => (\n                      <Badge key={tag} variant=\"secondary\">\n                        {tag}\n                      </Badge>\n                    ))}\n                  </div>\n\n                  {/* Content */}\n                  <FormField label=\"Prompt Content\">\n                    <Textarea\n                      value={selectedPrompt.templateText}\n                      rows={15}\n                      readOnly\n                      className=\"font-mono text-sm\"\n                    />\n                  </FormField>\n\n                  {/* Variables */}\n                  {selectedVariables.length > 0 && (\n                    <div>\n                      <p className=\"text-sm font-medium mb-2\">Variables</p>\n                      <div className=\"space-y-2\">\n                        {selectedVariables.map((variable: PromptVariable) => (\n                          <div\n                            key={variable.name}\n                            className=\"flex items-center gap-4 p-3 bg-bg-sunken rounded-lg\"\n                          >\n                            <div className=\"flex-1\">\n                              <p className=\"font-medium text-sm\">\n                                {`{{${variable.name}}}`}\n                                {variable.required && (\n                                  <span className=\"text-status-error-text ml-1\">*</span>\n                                )}\n                              </p>\n                              {variable.description && (\n                                <p className=\"text-xs text-text-secondary\">\n                                  {variable.description}\n                                </p>\n                              )}\n                            </div>\n                            <Badge variant=\"outline\" className=\"capitalize\">\n                              {variable.type}\n                            </Badge>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  )}\n\n                  <div className=\"pt-4 text-xs text-text-secondary\">\n                    Updated {formatRelativeTime(selectedPrompt.updatedAt)}\n                  </div>\n                </CardContent>\n              </GlassCard>\n            ) : (\n              <EmptyState\n                illustration=\"onboarding\"\n                title=\"Select a prompt\"\n                description=\"Choose a prompt from the list to view and edit\"\n              />\n            )}\n          </div>\n\n          {/* Test Panel */}\n          <div className=\"col-span-3\">\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"text-base flex items-center gap-2\">\n                  <Play size={16} />\n                  Test Prompt\n                </CardTitle>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                {selectedVariables.map((variable: PromptVariable) => (\n                  <FormField key={variable.name} label={variable.name}>\n                    <Input\n                      placeholder={variable.description || `Enter ${variable.name}`}\n                      value={testVariables[variable.name] || ''}\n                      onChange={(e) =>\n                        setTestVariables({ ...testVariables, [variable.name]: e.target.value })\n                      }\n                    />\n                  </FormField>\n                ))}\n\n                <BotmanorPermissionGate permission={BOTMANOR_PERMISSIONS.PROMPT_TEMPLATE_EXECUTE}>\n                  <Button\n                    className=\"w-full\"\n                    onClick={() => void handleTest()}\n                    isLoading={isRunning}\n                    disabled={!selectedPrompt}\n                  >\n                    Run Test\n                  </Button>\n                </BotmanorPermissionGate>\n\n                {testOutput && (\n                  <div>\n                    <p className=\"text-sm font-medium mb-2\">Output</p>\n                    <div className=\"p-3 bg-bg-sunken rounded-lg text-sm whitespace-pre-wrap font-mono max-h-64 overflow-auto\">\n                      {testOutput}\n                    </div>\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}