crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/mandate/MandateSubmission.tsx

@@ -0,0 +1,167 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from '@remix-run/react';
+import type { Mandate } from '~/types/mandate';
+import { createScopedLogger } from '~/utils/logger';
+import { classNames } from '~/utils/classNames';
+
+const logger = createScopedLogger('MandateSubmission');
+
+interface MandateSubmissionProps {
+  initialMandate?: Mandate;
+}
+
+/**
+ * MandateSubmission component for submitting structured mandates to bolt.diy.
+ * This replaces the free-form chat interface with a structured mandate API.
+ */
+export function MandateSubmission({ initialMandate }: MandateSubmissionProps) {
+  const [mandate, setMandate] = useState<Mandate | null>(initialMandate || null);
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'accepted' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [eventStreamUrl, setEventStreamUrl] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const handleSubmit = useCallback(async () => {
+    if (!mandate) {
+      setError('No mandate to submit');
+      return;
+    }
+
+    setStatus('submitting');
+    setError(null);
+
+    try {
+      const response = await fetch('/api/mandate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(mandate),
+      });
+
+      if (response.status === 202) {
+        const result = await response.json() as { event_stream_url?: string; mandate_id?: string };
+        setStatus('accepted');
+        setEventStreamUrl(result.event_stream_url || null);
+        
+        // Navigate to observability dashboard
+        if (result.mandate_id) {
+          navigate(`/observability/${result.mandate_id}`);
+        }
+      } else {
+        const errorData = await response.json() as { error?: string };
+        setError(errorData.error || `HTTP ${response.status}: ${response.statusText}`);
+        setStatus('error');
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      logger.error(`Failed to submit mandate: ${errorMessage}`);
+      setError(errorMessage);
+      setStatus('error');
+    }
+  }, [mandate, navigate]);
+
+  return (
+    <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1 p-8">
+      <div className="max-w-4xl mx-auto w-full">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-bolt-elements-textPrimary mb-2">
+            Mandate Submission
+          </h1>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            Submit a structured mandate for autonomous code execution. Mandates are typically generated by CorporateSwarm governance system.
+          </p>
+        </div>
+
+        {status === 'accepted' && eventStreamUrl && (
+          <div className="mb-4 p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
+            <p className="text-sm text-green-500">
+              Mandate accepted! Execution started. Redirecting to observability dashboard...
+            </p>
+          </div>
+        )}
+
+        {error && (
+          <div className="mb-4 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
+            <p className="text-sm text-red-500">Error: {error}</p>
+          </div>
+        )}
+
+        <div className="bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg p-6">
+          {mandate ? (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">
+                  Mandate ID
+                </label>
+                <div className="text-sm text-bolt-elements-textSecondary font-mono bg-bolt-elements-background-depth-3 p-2 rounded">
+                  {mandate.mandate_id}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">
+                  Objectives
+                </label>
+                <ul className="list-disc list-inside text-sm text-bolt-elements-textSecondary space-y-1">
+                  {mandate.objectives.map((obj, idx) => (
+                    <li key={idx}>{obj}</li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">
+                  Budget
+                </label>
+                <div className="text-sm text-bolt-elements-textSecondary space-y-1">
+                  <div>Tokens: {mandate.budget.token.toLocaleString()}</div>
+                  <div>Time: {mandate.budget.time}s</div>
+                  <div>Cost: ${mandate.budget.cost.toFixed(2)}</div>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-bolt-elements-textPrimary mb-2">
+                  Constraints
+                </label>
+                <div className="text-sm text-bolt-elements-textSecondary space-y-1">
+                  <div>Language: {mandate.constraints.language}</div>
+                  <div>Max Dependencies: {mandate.constraints.maxDependencies}</div>
+                  <div>No Network: {mandate.constraints.noNetwork ? 'Yes' : 'No'}</div>
+                  <div>Max Files: {mandate.constraints.maxFiles}</div>
+                </div>
+              </div>
+
+              <div className="pt-4 border-t border-bolt-elements-borderColor">
+                <button
+                  onClick={handleSubmit}
+                  disabled={status === 'submitting' || status === 'accepted'}
+                  className={classNames(
+                    'px-4 py-2 rounded-md text-sm font-medium',
+                    'bg-accent-500 text-white',
+                    'hover:bg-accent-600',
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
+                    'transition-colors'
+                  )}
+                >
+                  {status === 'submitting' ? 'Submitting...' : status === 'accepted' ? 'Accepted' : 'Submit Mandate'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-bolt-elements-textSecondary mb-4">
+                No mandate available. Mandates are typically provided by the CorporateSwarm governance system.
+              </p>
+              <p className="text-sm text-bolt-elements-textTertiary">
+                To view execution status, navigate to the observability dashboard.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/observability/DeploymentStatus.tsx

@@ -0,0 +1,168 @@
+import { useMemo } from 'react';
+import type { ExecutionEvent } from '~/types/mandate';
+import { classNames } from '~/utils/classNames';
+
+interface DeploymentStatusProps {
+  events: ExecutionEvent[];
+}
+
+/**
+ * DeploymentStatus component displays deployment status and URLs.
+ */
+export function DeploymentStatus({ events }: DeploymentStatusProps) {
+  const deploymentEvents = useMemo(() => {
+    // Include both deployment_start, deployment_end, and deployment_status events
+    return events.filter((event) => 
+      event.type === 'deployment_status' || 
+      event.type === 'deployment_start' || 
+      event.type === 'deployment_end'
+    );
+  }, [events]);
+
+  const latestDeployment = useMemo(() => {
+    if (deploymentEvents.length === 0) return null;
+    return deploymentEvents[deploymentEvents.length - 1];
+  }, [deploymentEvents]);
+
+  const getStatusColor = (status?: string) => {
+    switch (status) {
+      case 'complete':
+        return 'text-green-500 bg-green-500/20';
+      case 'running':
+        return 'text-blue-500 bg-blue-500/20';
+      case 'pending':
+        return 'text-yellow-500 bg-yellow-500/20';
+      case 'failed':
+        return 'text-red-500 bg-red-500/20';
+      default:
+        return 'text-gray-500 bg-gray-500/20';
+    }
+  };
+
+  if (deploymentEvents.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">
+          No deployment events yet. Deployment status will appear here when deployment is initiated.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Latest Deployment */}
+      {latestDeployment && (
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Latest Deployment</h3>
+
+          <div className="space-y-4">
+            {/* Status */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm text-bolt-elements-textSecondary">Status</span>
+                <span
+                  className={classNames(
+                    'px-3 py-1 rounded text-sm font-medium',
+                    getStatusColor(latestDeployment.data.deployment_status)
+                  )}
+                >
+                  {(latestDeployment.data.deployment_status || 'unknown').toUpperCase()}
+                </span>
+              </div>
+            </div>
+
+            {/* Provider */}
+            {latestDeployment.data.deployment_provider && (
+              <div>
+                <div className="text-sm text-bolt-elements-textSecondary mb-1">Provider</div>
+                <div className="text-sm font-medium text-bolt-elements-textPrimary">
+                  {latestDeployment.data.deployment_provider}
+                </div>
+              </div>
+            )}
+
+            {/* URL */}
+            {latestDeployment.data.deployment_url && (
+              <div>
+                <div className="text-sm text-bolt-elements-textSecondary mb-1">Deployment URL</div>
+                <a
+                  href={latestDeployment.data.deployment_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-mono text-accent-500 hover:underline break-all"
+                >
+                  {latestDeployment.data.deployment_url}
+                </a>
+              </div>
+            )}
+
+            {/* Error */}
+            {latestDeployment.data.error && (
+              <div>
+                <div className="text-sm text-bolt-elements-textSecondary mb-1">Error</div>
+                <div className="text-sm text-red-500 bg-red-500/10 p-2 rounded">
+                  {latestDeployment.data.error}
+                </div>
+              </div>
+            )}
+
+            {/* Timestamp */}
+            <div>
+              <div className="text-sm text-bolt-elements-textSecondary mb-1">Deployed At</div>
+              <div className="text-sm text-bolt-elements-textPrimary">
+                {new Date(latestDeployment.timestamp).toLocaleString()}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Deployment History */}
+      {deploymentEvents.length > 1 && (
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Deployment History</h3>
+          <div className="space-y-2">
+            {deploymentEvents.map((event, index) => (
+              <div
+                key={`${event.timestamp}-${index}`}
+                className="p-3 rounded border border-bolt-elements-borderColor bg-bolt-elements-background-depth-3"
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                    Iteration {event.iteration}
+                  </span>
+                  <span
+                    className={classNames(
+                      'px-2 py-1 rounded text-xs font-medium',
+                      getStatusColor(event.data.deployment_status)
+                    )}
+                  >
+                    {(event.data.deployment_status || 'unknown').toUpperCase()}
+                  </span>
+                </div>
+                {event.data.deployment_url && (
+                  <a
+                    href={event.data.deployment_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs font-mono text-accent-500 hover:underline break-all"
+                  >
+                    {event.data.deployment_url}
+                  </a>
+                )}
+                {event.data.error && (
+                  <p className="text-xs text-red-500 mt-1">{event.data.error}</p>
+                )}
+                <div className="text-xs text-bolt-elements-textTertiary mt-1">
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/observability/EventTimeline.tsx

@@ -0,0 +1,119 @@
+import type { ExecutionEvent } from '~/types/mandate';
+import { classNames } from '~/utils/classNames';
+
+interface EventTimelineProps {
+  events: ExecutionEvent[];
+}
+
+/**
+ * EventTimeline component displays execution events in chronological order.
+ */
+export function EventTimeline({ events }: EventTimelineProps) {
+  const getEventIcon = (type: ExecutionEvent['type']) => {
+    switch (type) {
+      case 'iteration_start':
+        return 'i-ph:play-circle';
+      case 'iteration_end':
+        return 'i-ph:check-circle';
+      case 'log':
+        return 'i-ph:info';
+      case 'error':
+        return 'i-ph:x-circle';
+      case 'diff':
+        return 'i-ph:git-diff';
+      case 'governance_check':
+        return 'i-ph:shield-check';
+      case 'deployment_status':
+      case 'deployment_start':
+      case 'deployment_end':
+        return 'i-ph:rocket';
+      default:
+        return 'i-ph:circle';
+    }
+  };
+
+  const getEventColor = (type: ExecutionEvent['type']) => {
+    switch (type) {
+      case 'iteration_start':
+        return 'text-blue-500';
+      case 'iteration_end':
+        return 'text-green-500';
+      case 'log':
+        return 'text-gray-500';
+      case 'error':
+        return 'text-red-500';
+      case 'diff':
+        return 'text-purple-500';
+      case 'governance_check':
+        return 'text-yellow-500';
+      case 'deployment_status':
+      case 'deployment_start':
+      case 'deployment_end':
+        return 'text-indigo-500';
+      default:
+        return 'text-gray-400';
+    }
+  };
+
+  if (events.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">No events yet. Waiting for execution to start...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {events.map((event, index) => (
+        <div
+          key={`${event.timestamp}-${index}`}
+          className={classNames(
+            'flex gap-4 p-4 rounded-lg border',
+            'bg-bolt-elements-background-depth-3',
+            'border-bolt-elements-borderColor'
+          )}
+        >
+          <div className="flex-shrink-0">
+            <div className={classNames('text-2xl', getEventColor(event.type))}>
+              <span className={getEventIcon(event.type)} />
+            </div>
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between mb-1">
+              <span className="font-medium text-bolt-elements-textPrimary capitalize">
+                {event.type.replace(/_/g, ' ')}
+              </span>
+              <span className="text-xs text-bolt-elements-textTertiary">
+                {new Date(event.timestamp).toLocaleTimeString()}
+              </span>
+            </div>
+            {event.data.message && (
+              <p className="text-sm text-bolt-elements-textSecondary mb-2">{event.data.message}</p>
+            )}
+            {event.data.status && (
+              <span
+                className={classNames(
+                  'inline-block px-2 py-1 rounded text-xs font-medium',
+                  event.data.status === 'success'
+                    ? 'bg-green-500/20 text-green-500'
+                    : event.data.status === 'failed'
+                      ? 'bg-red-500/20 text-red-500'
+                      : 'bg-blue-500/20 text-blue-500'
+                )}
+              >
+                {event.data.status}
+              </span>
+            )}
+            {event.iteration > 0 && (
+              <div className="mt-2 text-xs text-bolt-elements-textTertiary">
+                Iteration {event.iteration}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/observability/FileDiffViewer.tsx

@@ -0,0 +1,121 @@
+import { useState, useMemo } from 'react';
+import type { ExecutionEvent } from '~/types/mandate';
+import { classNames } from '~/utils/classNames';
+
+interface FileDiffViewerProps {
+  events: ExecutionEvent[];
+}
+
+/**
+ * FileDiffViewer component displays file changes per iteration.
+ */
+export function FileDiffViewer({ events }: FileDiffViewerProps) {
+  const [selectedIteration, setSelectedIteration] = useState<number | null>(null);
+
+  const diffEvents = useMemo(() => {
+    return events.filter((event) => event.type === 'diff');
+  }, [events]);
+
+  const iterations = useMemo(() => {
+    const uniqueIterations = new Set(diffEvents.map((e) => e.iteration));
+    return Array.from(uniqueIterations).sort((a, b) => a - b);
+  }, [diffEvents]);
+
+  const selectedDiffs = useMemo(() => {
+    if (selectedIteration === null) {
+      return diffEvents;
+    }
+    return diffEvents.filter((e) => e.iteration === selectedIteration);
+  }, [diffEvents, selectedIteration]);
+
+  if (diffEvents.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">
+          No file changes yet. Diffs will appear here as execution progresses.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Iteration Filter */}
+      {iterations.length > 1 && (
+        <div className="mb-4 flex gap-2 flex-wrap">
+          <button
+            onClick={() => setSelectedIteration(null)}
+            className={classNames(
+              'px-3 py-1 rounded text-sm font-medium transition-colors',
+              selectedIteration === null
+                ? 'bg-accent-500 text-white'
+                : 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary'
+            )}
+          >
+            All Iterations
+          </button>
+          {iterations.map((iter) => (
+            <button
+              key={iter}
+              onClick={() => setSelectedIteration(iter)}
+              className={classNames(
+                'px-3 py-1 rounded text-sm font-medium transition-colors',
+                selectedIteration === iter
+                  ? 'bg-accent-500 text-white'
+                  : 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary'
+              )}
+            >
+              Iteration {iter}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Diffs */}
+      <div className="flex-1 overflow-auto space-y-4">
+        {selectedDiffs.map((event, index) => {
+          const filesChanged = event.data.files_changed || [];
+          const timestamp = new Date(event.timestamp).toLocaleString();
+
+          return (
+            <div
+              key={`${event.timestamp}-${index}`}
+              className="p-4 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-3"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <span className="i-ph:git-diff text-purple-500" />
+                  <span className="font-medium text-bolt-elements-textPrimary">
+                    Iteration {event.iteration}
+                  </span>
+                </div>
+                <span className="text-xs text-bolt-elements-textTertiary">{timestamp}</span>
+              </div>
+
+              {filesChanged.length > 0 ? (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium text-bolt-elements-textSecondary mb-2">
+                    Files Changed ({filesChanged.length}):
+                  </div>
+                  <ul className="space-y-1">
+                    {filesChanged.map((file, fileIdx) => (
+                      <li
+                        key={fileIdx}
+                        className="text-sm font-mono text-bolt-elements-textPrimary bg-bolt-elements-background-depth-4 p-2 rounded"
+                      >
+                        {file}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : (
+                <p className="text-sm text-bolt-elements-textSecondary">No file changes in this iteration.</p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+