@contractspec/example.agent-console 1.46.1 → 1.47.0

package/src/ui/modals/CreateAgentModal.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+/**
+ * CreateAgentModal - Form for creating a new AI agent
+ *
+ * Wires to CreateAgentCommand via useAgentMutations hook.
+ */
+import { useState } from 'react';
+import { Button, Input } from '@contractspec/lib.design-system';
+
+// Local type definition for modal props
+export interface CreateAgentInput {
+  name: string;
+  description?: string;
+  modelProvider: string;
+  modelName: string;
+  systemPrompt?: string;
+}
+
+interface CreateAgentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (input: CreateAgentInput) => Promise<void>;
+  isLoading?: boolean;
+}
+
+const MODEL_PROVIDERS = [
+  {
+    value: 'openai',
+    label: 'OpenAI',
+    models: ['gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+  },
+  {
+    value: 'anthropic',
+    label: 'Anthropic',
+    models: ['claude-3-opus', 'claude-3-sonnet', 'claude-3-haiku'],
+  },
+  { value: 'google', label: 'Google', models: ['gemini-pro', 'gemini-ultra'] },
+  {
+    value: 'mistral',
+    label: 'Mistral',
+    models: ['mistral-large', 'mistral-medium', 'mistral-small'],
+  },
+] as const;
+
+type ModelProvider = (typeof MODEL_PROVIDERS)[number]['value'];
+
+export function CreateAgentModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false,
+}: CreateAgentModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [modelProvider, setModelProvider] = useState<ModelProvider>('openai');
+  const [modelName, setModelName] = useState('gpt-4o');
+  const [systemPrompt, setSystemPrompt] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const selectedProvider = MODEL_PROVIDERS.find(
+    (p) => p.value === modelProvider
+  );
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validation
+    if (!name.trim()) {
+      setError('Agent name is required');
+      return;
+    }
+
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        modelProvider,
+        modelName,
+        systemPrompt: systemPrompt.trim() || undefined,
+      });
+
+      // Reset form
+      setName('');
+      setDescription('');
+      setModelProvider('openai');
+      setModelName('gpt-4o');
+      setSystemPrompt('');
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create agent');
+    }
+  };
+
+  // Update model when provider changes
+  const handleProviderChange = (provider: ModelProvider) => {
+    setModelProvider(provider);
+    const providerConfig = MODEL_PROVIDERS.find((p) => p.value === provider);
+    if (providerConfig) {
+      setModelName(providerConfig.models[0]);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="bg-background/80 absolute inset-0 backdrop-blur-sm"
+        onClick={onClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') onClose();
+        }}
+        aria-label="Close modal"
+      />
+
+      {/* Modal */}
+      <div className="bg-card border-border relative z-10 max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border p-6 shadow-xl">
+        <h2 className="mb-4 text-xl font-semibold">Create New Agent</h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Agent Name */}
+          <div>
+            <label
+              htmlFor="agent-name"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Agent Name *
+            </label>
+            <Input
+              id="agent-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., Customer Support Bot"
+              disabled={isLoading}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label
+              htmlFor="agent-description"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              Description
+            </label>
+            <textarea
+              id="agent-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Describe what this agent does..."
+              rows={2}
+              disabled={isLoading}
+              className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+            />
+          </div>
+
+          {/* Model Provider & Model */}
+          <div className="flex gap-3">
+            <div className="flex-1">
+              <label
+                htmlFor="model-provider"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Provider *
+              </label>
+              <select
+                id="model-provider"
+                value={modelProvider}
+                onChange={(e) =>
+                  handleProviderChange(e.target.value as ModelProvider)
+                }
+                disabled={isLoading}
+                className="border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+              >
+                {MODEL_PROVIDERS.map((p) => (
+                  <option key={p.value} value={p.value}>
+                    {p.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="flex-1">
+              <label
+                htmlFor="model-name"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Model *
+              </label>
+              <select
+                id="model-name"
+                value={modelName}
+                onChange={(e) => setModelName(e.target.value)}
+                disabled={isLoading}
+                className="border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+              >
+                {selectedProvider?.models.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* System Prompt */}
+          <div>
+            <label
+              htmlFor="system-prompt"
+              className="text-muted-foreground mb-1 block text-sm font-medium"
+            >
+              System Prompt
+            </label>
+            <textarea
+              id="system-prompt"
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="You are a helpful assistant that..."
+              rows={4}
+              disabled={isLoading}
+              className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 font-mono text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">
+              Instructions that define the agent's behavior
+            </p>
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onPress={onClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Creating...' : 'Create Agent'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/ui/modals/index.ts

@@ -0,0 +1,2 @@
+export { CreateAgentModal } from './CreateAgentModal';
+export { AgentActionsModal } from './AgentActionsModal';

package/src/ui/overlays/demo-overlays.ts

@@ -0,0 +1,77 @@
+/**
+ * Demo Overlay Definitions for Agent Console
+ *
+ * These overlays customize the presentation for different contexts
+ * (e.g., demo users, different roles).
+ */
+import type { OverlayDefinition } from '../../shared/overlay-types';
+
+/**
+ * Demo user overlay - hides advanced configuration options
+ */
+export const agentConsoleDemoOverlay: OverlayDefinition = {
+  overlayId: 'agent-console.demo-user',
+  version: '1.0.0',
+  description: 'Simplifies agent console for demo users',
+  appliesTo: {
+    feature: 'agent-console',
+    role: 'demo',
+  },
+  modifications: [
+    {
+      type: 'hideField',
+      field: 'modelConfig',
+      reason: 'Advanced config not relevant for demo',
+    },
+    {
+      type: 'hideField',
+      field: 'webhookConfig',
+      reason: 'Integration not available in demo',
+    },
+    {
+      type: 'renameLabel',
+      field: 'systemPrompt',
+      newLabel: 'Agent Instructions',
+    },
+    {
+      type: 'addBadge',
+      position: 'header',
+      label: 'Demo Mode',
+      variant: 'warning',
+    },
+  ],
+};
+
+/**
+ * Read-only overlay - for viewing without edit permissions
+ */
+export const agentConsoleReadOnlyOverlay: OverlayDefinition = {
+  overlayId: 'agent-console.read-only',
+  version: '1.0.0',
+  description: 'Read-only view for non-admin users',
+  appliesTo: {
+    feature: 'agent-console',
+    role: 'viewer',
+  },
+  modifications: [
+    {
+      type: 'hideField',
+      field: 'deleteButton',
+      reason: 'No delete permission',
+    },
+    { type: 'hideField', field: 'editButton', reason: 'No edit permission' },
+    {
+      type: 'hideField',
+      field: 'createButton',
+      reason: 'No create permission',
+    },
+  ],
+};
+
+/**
+ * All overlays for agent-console
+ */
+export const agentConsoleOverlays: OverlayDefinition[] = [
+  agentConsoleDemoOverlay,
+  agentConsoleReadOnlyOverlay,
+];

package/src/ui/overlays/index.ts

@@ -0,0 +1 @@
+export * from './demo-overlays';

package/src/ui/renderers/agent-list.markdown.ts

@@ -0,0 +1,84 @@
+/**
+ * Markdown Renderer for Agent List Presentation
+ *
+ * Uses handlers from the agent-console example package.
+ */
+import type {
+  PresentationRenderer,
+  PresentationSpec,
+} from '@contractspec/lib.contracts';
+import {
+  type AgentSummary,
+  mockListAgentsHandler,
+} from '@contractspec/example.agent-console/handlers';
+
+type Agent = AgentSummary;
+
+/**
+ * Markdown renderer for agent-console.agent.list presentation
+ * Only handles AgentListView component
+ */
+export const agentListMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}> = {
+  target: 'markdown',
+  render: async (desc: PresentationSpec) => {
+    // Only handle AgentListView
+    if (
+      desc.source.type !== 'component' ||
+      desc.source.componentKey !== 'AgentListView'
+    ) {
+      throw new Error('agentListMarkdownRenderer: not AgentListView');
+    }
+
+    // Fetch data using mock handler
+    const data = await mockListAgentsHandler({
+      organizationId: 'demo-org',
+      limit: 50,
+      offset: 0,
+    });
+
+    // Generate markdown
+    const lines: string[] = [
+      `# ${desc.meta.description ?? 'Agent List'}`,
+      '',
+      `> ${desc.meta.key} v${desc.meta.version}`,
+      '',
+      `**Total Agents:** ${data.total}`,
+      '',
+      '## Agents',
+      '',
+    ];
+
+    // Group by status
+    const byStatus: Record<string, Agent[]> = {};
+    for (const agent of data.items) {
+      const status = agent.status;
+      if (byStatus[status]) {
+        byStatus[status].push(agent);
+      } else {
+        byStatus[status] = [agent];
+      }
+    }
+
+    for (const [status, agents] of Object.entries(byStatus)) {
+      lines.push(`### ${status} (${agents.length})`);
+      lines.push('');
+      for (const agent of agents) {
+        lines.push(
+          `- **${agent.name}** (${agent.modelProvider}/${agent.modelName})`
+        );
+        if (agent.description) {
+          lines.push(`  > ${agent.description}`);
+        }
+      }
+      lines.push('');
+    }
+
+    return {
+      mimeType: 'text/markdown',
+      body: lines.join('\n'),
+    };
+  },
+};

package/src/ui/renderers/agent-list.renderer.tsx

@@ -0,0 +1,27 @@
+/**
+ * React Renderer for Agent List Presentation
+ */
+import type {
+  PresentationRenderer,
+  PresentationSpec,
+} from '@contractspec/lib.contracts';
+import { AgentListView } from '../views/AgentListView';
+
+/**
+ * React renderer for agent-console.agent.list presentation
+ */
+export const agentListReactRenderer: PresentationRenderer<React.ReactElement> =
+  {
+    target: 'react',
+    render: async (desc: PresentationSpec) => {
+      if (desc.source.type !== 'component') {
+        throw new Error('AgentListRenderer: expected component source');
+      }
+      if (desc.source.componentKey !== 'AgentListView') {
+        throw new Error(
+          `AgentListRenderer: unknown component ${desc.source.componentKey}`
+        );
+      }
+      return <AgentListView />;
+    },
+  };

package/src/ui/renderers/dashboard.markdown.ts

@@ -0,0 +1,169 @@
+/**
+ * Markdown Renderer for Agent Console Dashboard
+ *
+ * Provides a comprehensive overview of agents, runs, and tools.
+ */
+import type {
+  PresentationSpec,
+  PresentationRenderer,
+} from '@contractspec/lib.contracts';
+import {
+  mockListAgentsHandler,
+  mockListRunsHandler,
+  mockListToolsHandler,
+} from '@contractspec/example.agent-console/handlers';
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+/**
+ * Markdown renderer for agent-console.dashboard presentation
+ * Only handles AgentConsoleDashboard component
+ */
+export const agentDashboardMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}> = {
+  target: 'markdown',
+  render: async (desc: PresentationSpec) => {
+    // Only handle AgentConsoleDashboard
+    if (
+      desc.source.type !== 'component' ||
+      desc.source.componentKey !== 'AgentConsoleDashboard'
+    ) {
+      throw new Error(
+        'agentDashboardMarkdownRenderer: not AgentConsoleDashboard'
+      );
+    }
+
+    // Fetch all data in parallel
+    const [agentsData, runsData, toolsData] = await Promise.all([
+      mockListAgentsHandler({
+        organizationId: 'demo-org',
+        limit: 100,
+      }),
+      mockListRunsHandler({
+        limit: 100,
+      }),
+      mockListToolsHandler({
+        organizationId: 'demo-org',
+        limit: 100,
+      }),
+    ]);
+
+    // Calculate stats
+    const activeAgents = agentsData.items.filter(
+      (a) => a.status === 'ACTIVE'
+    ).length;
+    const completedRuns = runsData.items.filter(
+      (r) => r.status === 'COMPLETED'
+    ).length;
+    const failedRuns = runsData.items.filter(
+      (r) => r.status === 'FAILED'
+    ).length;
+    const totalTokens = runsData.items.reduce(
+      (sum, r) => sum + (r.totalTokens ?? 0),
+      0
+    );
+    const totalCost = runsData.items.reduce(
+      (sum, r) => sum + (r.estimatedCostUsd ?? 0),
+      0
+    );
+    const activeTools = toolsData.items.filter(
+      (t) => t.status === 'ACTIVE'
+    ).length;
+
+    // Build dashboard markdown
+    const lines: string[] = [
+      '# Agent Console Dashboard',
+      '',
+      '> AI agent operations overview',
+      '',
+      '## Summary',
+      '',
+      '| Metric | Value |',
+      '|--------|-------|',
+      `| Total Agents | ${agentsData.total} |`,
+      `| Active Agents | ${activeAgents} |`,
+      `| Total Runs | ${runsData.total} |`,
+      `| Completed Runs | ${completedRuns} |`,
+      `| Failed Runs | ${failedRuns} |`,
+      `| Total Tokens | ${totalTokens.toLocaleString()} |`,
+      `| Total Cost | $${totalCost.toFixed(4)} |`,
+      `| Total Tools | ${toolsData.total} |`,
+      `| Active Tools | ${activeTools} |`,
+      '',
+      '## Agents',
+      '',
+    ];
+
+    // Agent list
+    if (agentsData.items.length === 0) {
+      lines.push('_No agents configured._');
+    } else {
+      lines.push('| Agent | Model | Status | Description |');
+      lines.push('|-------|-------|--------|-------------|');
+      for (const agent of agentsData.items.slice(0, 5)) {
+        lines.push(
+          `| ${agent.name} | ${agent.modelProvider}/${agent.modelName} | ${agent.status} | ${agent.description ?? '-'} |`
+        );
+      }
+      if (agentsData.items.length > 5) {
+        lines.push(`| ... | ... | ... | _${agentsData.total - 5} more_ |`);
+      }
+    }
+
+    lines.push('');
+    lines.push('## Recent Runs');
+    lines.push('');
+
+    // Recent runs
+    if (runsData.items.length === 0) {
+      lines.push('_No runs yet._');
+    } else {
+      lines.push('| Run ID | Agent | Status | Duration | Tokens | Cost |');
+      lines.push('|--------|-------|--------|----------|--------|------|');
+      for (const run of runsData.items.slice(0, 5)) {
+        lines.push(
+          `| ${run.id.slice(-8)} | ${run.agentName} | ${run.status} | ${run.durationMs ? formatDuration(run.durationMs) : '-'} | ${run.totalTokens ?? 0} | $${(run.estimatedCostUsd ?? 0).toFixed(4)} |`
+        );
+      }
+      if (runsData.items.length > 5) {
+        lines.push(
+          `| ... | ... | ... | ... | ... | _${runsData.total - 5} more_ |`
+        );
+      }
+    }
+
+    lines.push('');
+    lines.push('## Tools');
+    lines.push('');
+
+    // Tool categories
+    const toolsByCategory: Record<string, typeof toolsData.items> = {};
+    for (const tool of toolsData.items) {
+      const cat = tool.category;
+      if (!toolsByCategory[cat]) toolsByCategory[cat] = [];
+      toolsByCategory[cat].push(tool);
+    }
+
+    if (Object.keys(toolsByCategory).length === 0) {
+      lines.push('_No tools registered._');
+    } else {
+      lines.push('| Category | Tools | Active |');
+      lines.push('|----------|-------|--------|');
+      for (const [category, tools] of Object.entries(toolsByCategory).sort()) {
+        const active = tools.filter((t) => t.status === 'ACTIVE').length;
+        lines.push(`| ${category} | ${tools.length} | ${active} |`);
+      }
+    }
+
+    return {
+      mimeType: 'text/markdown',
+      body: lines.join('\n'),
+    };
+  },
+};

package/src/ui/renderers/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Renderers for agent-console presentations
+ */
+
+// React renderers
+export { agentListReactRenderer } from './agent-list.renderer';
+
+// Markdown renderers
+export { agentListMarkdownRenderer } from './agent-list.markdown';
+export { runListMarkdownRenderer } from './run-list.markdown';
+export { toolRegistryMarkdownRenderer } from './tool-registry.markdown';
+export { agentDashboardMarkdownRenderer } from './dashboard.markdown';