crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,201 @@
+import { useState, useEffect } from 'react';
+import type { ExecutionEvent } from '~/types/mandate';
+import type { Mandate } from '~/types/mandate';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('MandateDetails');
+
+interface MandateDetailsProps {
+  mandateId: string;
+  events: ExecutionEvent[];
+}
+
+/**
+ * MandateDetails component displays mandate configuration and metadata.
+ */
+export function MandateDetails({ mandateId, events }: MandateDetailsProps) {
+  const [mandate, setMandate] = useState<Mandate | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Try to extract mandate from events (if it was included)
+    const mandateEvent = events.find((e) => e.type === 'iteration_start' && e.data.mandate);
+    if (mandateEvent?.data.mandate) {
+      setMandate(mandateEvent.data.mandate as Mandate);
+      setLoading(false);
+      return;
+    }
+
+    // Otherwise, try to fetch from API (if available)
+    const fetchMandate = async () => {
+      try {
+        // This would require a new API endpoint to fetch mandate details
+        // For now, we'll just show what we can from events
+        setLoading(false);
+      } catch (err) {
+        logger.error('Error fetching mandate:', err);
+        setLoading(false);
+      }
+    };
+
+    fetchMandate();
+  }, [mandateId, events]);
+
+  if (loading) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">Loading mandate details...</p>
+      </div>
+    );
+  }
+
+  if (!mandate) {
+    return (
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-2">Mandate ID</h3>
+          <p className="text-sm font-mono text-bolt-elements-textSecondary bg-bolt-elements-background-depth-3 p-2 rounded">
+            {mandateId}
+          </p>
+        </div>
+        <div>
+          <p className="text-bolt-elements-textSecondary">
+            Mandate details will be available once execution starts. Check the timeline for execution events.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Basic Info */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Mandate Information</h3>
+        <div className="space-y-2">
+          <div>
+            <span className="text-sm font-medium text-bolt-elements-textSecondary">ID:</span>
+            <span className="ml-2 text-sm font-mono text-bolt-elements-textPrimary">{mandate.mandate_id}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Objectives */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Objectives</h3>
+        <ul className="list-disc list-inside space-y-1 text-sm text-bolt-elements-textSecondary">
+          {mandate.objectives.map((obj, idx) => (
+            <li key={idx}>{obj}</li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Constraints */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Constraints</h3>
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <span className="text-bolt-elements-textSecondary">Language:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">{mandate.constraints.language}</span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Max Dependencies:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">{mandate.constraints.maxDependencies}</span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">No Network:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">
+              {mandate.constraints.noNetwork ? 'Yes' : 'No'}
+            </span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Max Files:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">{mandate.constraints.maxFiles}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Budget */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Budget</h3>
+        <div className="grid grid-cols-3 gap-4 text-sm">
+          <div>
+            <span className="text-bolt-elements-textSecondary">Tokens:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">
+              {mandate.budget.token.toLocaleString()}
+            </span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Time:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">{mandate.budget.time}s</span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Cost:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">${mandate.budget.cost.toFixed(2)}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Deliverables */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Deliverables</h3>
+        <ul className="list-disc list-inside space-y-1 text-sm text-bolt-elements-textSecondary">
+          {mandate.deliverables.map((deliverable, idx) => (
+            <li key={idx}>{deliverable}</li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Iteration Config */}
+      <div>
+        <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Iteration Configuration</h3>
+        <div className="grid grid-cols-3 gap-4 text-sm">
+          <div>
+            <span className="text-bolt-elements-textSecondary">Max Iterations:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">
+              {mandate.iteration_config.max_iterations}
+            </span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Test Required:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">
+              {mandate.iteration_config.test_required ? 'Yes' : 'No'}
+            </span>
+          </div>
+          <div>
+            <span className="text-bolt-elements-textSecondary">Quality Threshold:</span>
+            <span className="ml-2 text-bolt-elements-textPrimary">
+              {mandate.iteration_config.quality_threshold}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Deployment Config */}
+      {mandate.deployment && (
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-3">Deployment</h3>
+          <div className="text-sm space-y-1">
+            <div>
+              <span className="text-bolt-elements-textSecondary">Provider:</span>
+              <span className="ml-2 text-bolt-elements-textPrimary">{mandate.deployment.provider}</span>
+            </div>
+            <div>
+              <span className="text-bolt-elements-textSecondary">Auto Deploy:</span>
+              <span className="ml-2 text-bolt-elements-textPrimary">
+                {mandate.deployment.auto_deploy ? 'Yes' : 'No'}
+              </span>
+            </div>
+            {mandate.deployment.target && (
+              <div>
+                <span className="text-bolt-elements-textSecondary">Target:</span>
+                <span className="ml-2 text-bolt-elements-textPrimary">{mandate.deployment.target}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,200 @@
+import { useState, useEffect, useCallback } from 'react';
+import { EventTimeline } from './EventTimeline';
+import { MandateDetails } from './MandateDetails';
+import { FileDiffViewer } from './FileDiffViewer';
+import { LogStream } from './LogStream';
+import { GovernanceStatus } from './GovernanceStatus';
+import { DeploymentStatus } from './DeploymentStatus';
+import { GovernorMetrics } from './GovernorMetrics';
+import type { ExecutionEvent } from '~/types/mandate';
+import { createScopedLogger } from '~/utils/logger';
+import { classNames } from '~/utils/classNames';
+
+const logger = createScopedLogger('ObservabilityDashboard');
+
+interface ObservabilityDashboardProps {
+  mandateId: string;
+}
+
+type ViewMode = 'timeline' | 'details' | 'diffs' | 'logs' | 'governance' | 'deployment' | 'governor';
+
+/**
+ * Main observability dashboard component.
+ * Displays real-time execution state, diffs, logs, and governance metadata.
+ */
+export function ObservabilityDashboard({ mandateId }: ObservabilityDashboardProps) {
+  const [events, setEvents] = useState<ExecutionEvent[]>([]);
+  const [currentView, setCurrentView] = useState<ViewMode>('timeline');
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Connect to event stream
+  useEffect(() => {
+    let eventSource: EventSource | null = null;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 5;
+
+    const connect = () => {
+      try {
+        const streamUrl = `/api/mandate?stream=true&mandate_id=${mandateId}`;
+        eventSource = new EventSource(streamUrl);
+
+        eventSource.onopen = () => {
+          logger.info(`Connected to event stream for mandate ${mandateId}`);
+          setIsConnected(true);
+          setError(null);
+          reconnectAttempts = 0;
+        };
+
+        eventSource.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            
+            // Handle connection confirmation
+            if (data.type === 'connected') {
+              logger.debug('Event stream connected');
+              return;
+            }
+
+            // Add new event
+            setEvents((prev) => {
+              // Avoid duplicates
+              const exists = prev.some((e) => e.timestamp === data.timestamp && e.type === data.type);
+              if (exists) return prev;
+              return [...prev, data].sort((a, b) => a.timestamp - b.timestamp);
+            });
+          } catch (err) {
+            logger.error('Error parsing event:', err);
+          }
+        };
+
+        eventSource.onerror = (err) => {
+          logger.error('Event stream error:', err);
+          setIsConnected(false);
+          
+          if (eventSource?.readyState === EventSource.CLOSED) {
+            eventSource.close();
+            
+            // Attempt reconnection
+            if (reconnectAttempts < maxReconnectAttempts) {
+              reconnectAttempts++;
+              logger.info(`Reconnecting... (attempt ${reconnectAttempts}/${maxReconnectAttempts})`);
+              setTimeout(connect, 1000 * reconnectAttempts);
+            } else {
+              setError('Failed to connect to event stream after multiple attempts');
+            }
+          }
+        };
+      } catch (err) {
+        logger.error('Error setting up event stream:', err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      }
+    };
+
+    connect();
+
+    return () => {
+      if (eventSource) {
+        eventSource.close();
+      }
+    };
+  }, [mandateId]);
+
+  // Load initial events via polling (fallback)
+  useEffect(() => {
+    const loadInitialEvents = async () => {
+      try {
+        const response = await fetch(`/api/mandate?mandate_id=${mandateId}`);
+        if (response.ok) {
+          const data = await response.json() as { events?: ExecutionEvent[] };
+          if (data.events && Array.isArray(data.events)) {
+            setEvents(data.events.sort((a: ExecutionEvent, b: ExecutionEvent) => a.timestamp - b.timestamp));
+          }
+        }
+      } catch (err) {
+        logger.error('Error loading initial events:', err);
+      }
+    };
+
+    // Only load if we don't have events yet
+    if (events.length === 0) {
+      loadInitialEvents();
+    }
+  }, [mandateId, events.length]);
+
+  const viewButtons: { mode: ViewMode; label: string; icon: string }[] = [
+    { mode: 'timeline', label: 'Timeline', icon: 'i-ph:clock-clockwise' },
+    { mode: 'details', label: 'Details', icon: 'i-ph:file-text' },
+    { mode: 'diffs', label: 'Diffs', icon: 'i-ph:git-diff' },
+    { mode: 'logs', label: 'Logs', icon: 'i-ph:terminal' },
+    { mode: 'governance', label: 'Governance', icon: 'i-ph:shield-check' },
+    { mode: 'deployment', label: 'Deployment', icon: 'i-ph:rocket' },
+    { mode: 'governor', label: 'Governor', icon: 'i-ph:gear' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full w-full p-8">
+      <div className="max-w-7xl mx-auto w-full">
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between mb-2">
+            <h1 className="text-2xl font-bold text-bolt-elements-textPrimary">
+              Execution Observability
+            </h1>
+            <div className="flex items-center gap-2">
+              <div
+                className={classNames(
+                  'w-2 h-2 rounded-full',
+                  isConnected ? 'bg-green-500' : 'bg-red-500'
+                )}
+                title={isConnected ? 'Connected' : 'Disconnected'}
+              />
+              <span className="text-sm text-bolt-elements-textSecondary">
+                {isConnected ? 'Live' : 'Disconnected'}
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-bolt-elements-textSecondary">
+            Mandate ID: <span className="font-mono">{mandateId}</span>
+          </p>
+          {error && (
+            <div className="mt-2 p-2 bg-red-500/10 border border-red-500/20 rounded text-sm text-red-500">
+              {error}
+            </div>
+          )}
+        </div>
+
+        {/* View Tabs */}
+        <div className="mb-4 flex gap-2 border-b border-bolt-elements-borderColor">
+          {viewButtons.map(({ mode, label, icon }) => (
+            <button
+              key={mode}
+              onClick={() => setCurrentView(mode)}
+              className={classNames(
+                'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+                currentView === mode
+                  ? 'text-accent-500 border-accent-500'
+                  : 'text-bolt-elements-textSecondary border-transparent hover:text-bolt-elements-textPrimary'
+              )}
+            >
+              <span className={classNames(icon, 'mr-2')} />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg p-6 min-h-[600px]">
+          {currentView === 'timeline' && <EventTimeline events={events} />}
+          {currentView === 'details' && <MandateDetails mandateId={mandateId} events={events} />}
+          {currentView === 'diffs' && <FileDiffViewer events={events} />}
+          {currentView === 'logs' && <LogStream events={events} />}
+          {currentView === 'governance' && <GovernanceStatus events={events} />}
+          {currentView === 'deployment' && <DeploymentStatus events={events} />}
+          {currentView === 'governor' && <GovernorMetrics mandateId={mandateId} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/sidebar/HistoryItem.tsx

@@ -0,0 +1,187 @@
+import { useParams } from '@remix-run/react';
+import { classNames } from '~/utils/classNames';
+import { type ChatHistoryItem } from '~/lib/persistence';
+import WithTooltip from '~/components/ui/Tooltip';
+import { useEditChatDescription } from '~/lib/hooks';
+import { forwardRef, type ForwardedRef, useCallback } from 'react';
+import { Checkbox } from '~/components/ui/Checkbox';
+
+interface HistoryItemProps {
+  item: ChatHistoryItem;
+  onDelete?: (event: React.UIEvent) => void;
+  onDuplicate?: (id: string) => void;
+  exportChat: (id?: string) => void;
+  selectionMode?: boolean;
+  isSelected?: boolean;
+  onToggleSelection?: (id: string) => void;
+}
+
+export function HistoryItem({
+  item,
+  onDelete,
+  onDuplicate,
+  exportChat,
+  selectionMode = false,
+  isSelected = false,
+  onToggleSelection,
+}: HistoryItemProps) {
+  const { id: urlId } = useParams();
+  const isActiveChat = urlId === item.urlId;
+
+  const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } =
+    useEditChatDescription({
+      initialDescription: item.description,
+      customChatId: item.id,
+      syncWithGlobalStore: isActiveChat,
+    });
+
+  const handleItemClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (selectionMode) {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('Item clicked in selection mode:', item.id);
+        onToggleSelection?.(item.id);
+      }
+    },
+    [selectionMode, item.id, onToggleSelection],
+  );
+
+  const handleCheckboxChange = useCallback(() => {
+    console.log('Checkbox changed for item:', item.id);
+    onToggleSelection?.(item.id);
+  }, [item.id, onToggleSelection]);
+
+  const handleDeleteClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      console.log('Delete button clicked for item:', item.id);
+
+      if (onDelete) {
+        onDelete(event as unknown as React.UIEvent);
+      }
+    },
+    [onDelete, item.id],
+  );
+
+  return (
+    <div
+      className={classNames(
+        'group rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50/80 dark:hover:bg-gray-800/30 overflow-hidden flex justify-between items-center px-3 py-2 transition-colors',
+        { 'text-gray-900 dark:text-white bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
+        { 'cursor-pointer': selectionMode },
+      )}
+      onClick={selectionMode ? handleItemClick : undefined}
+    >
+      {selectionMode && (
+        <div className="flex items-center mr-2" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            id={`select-${item.id}`}
+            checked={isSelected}
+            onCheckedChange={handleCheckboxChange}
+            className="h-4 w-4"
+          />
+        </div>
+      )}
+
+      {editing ? (
+        <form onSubmit={handleSubmit} className="flex-1 flex items-center gap-2">
+          <input
+            type="text"
+            className="flex-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-md px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-800 focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+            autoFocus
+            value={currentDescription}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            type="submit"
+            className="i-ph:check h-4 w-4 text-gray-500 hover:text-purple-500 transition-colors"
+            onMouseDown={handleSubmit}
+          />
+        </form>
+      ) : (
+        <a
+          href={`/chat/${item.urlId}`}
+          className="flex w-full relative truncate block"
+          onClick={selectionMode ? handleItemClick : undefined}
+        >
+          <WithTooltip tooltip={currentDescription}>
+            <span className="truncate pr-24">{currentDescription}</span>
+          </WithTooltip>
+          <div
+            className={classNames(
+              'absolute right-0 top-0 bottom-0 flex items-center bg-transparent px-2 transition-colors',
+            )}
+          >
+            <div className="flex items-center gap-2.5 text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
+              <ChatActionButton
+                toolTipContent="Export"
+                icon="i-ph:download-simple h-4 w-4"
+                onClick={(event) => {
+                  event.preventDefault();
+                  exportChat(item.id);
+                }}
+              />
+              {onDuplicate && (
+                <ChatActionButton
+                  toolTipContent="Duplicate"
+                  icon="i-ph:copy h-4 w-4"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    onDuplicate?.(item.id);
+                  }}
+                />
+              )}
+              <ChatActionButton
+                toolTipContent="Rename"
+                icon="i-ph:pencil-fill h-4 w-4"
+                onClick={(event) => {
+                  event.preventDefault();
+                  toggleEditMode();
+                }}
+              />
+              <ChatActionButton
+                toolTipContent="Delete"
+                icon="i-ph:trash h-4 w-4"
+                className="hover:text-red-500 dark:hover:text-red-400"
+                onClick={handleDeleteClick}
+              />
+            </div>
+          </div>
+        </a>
+      )}
+    </div>
+  );
+}
+
+const ChatActionButton = forwardRef(
+  (
+    {
+      toolTipContent,
+      icon,
+      className,
+      onClick,
+    }: {
+      toolTipContent: string;
+      icon: string;
+      className?: string;
+      onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+      btnTitle?: string;
+    },
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    return (
+      <WithTooltip tooltip={toolTipContent} position="bottom" sideOffset={4}>
+        <button
+          ref={ref}
+          type="button"
+          className={`text-gray-400 dark:text-gray-500 hover:text-purple-500 dark:hover:text-purple-400 transition-colors ${icon} ${className ? className : ''}`}
+          onClick={onClick}
+        />
+      </WithTooltip>
+    );
+  },
+);