crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/routes/workflow.$proposalId.tsx

@@ -0,0 +1,170 @@
+/**
+ * Workflow preview route.
+ * 
+ * Shows complete workflow from proposal creation through deployment.
+ */
+
+import { json, type LoaderFunctionArgs, type MetaFunction } from '@remix-run/cloudflare';
+import { useLoaderData, useParams } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { ClientOnly } from 'remix-utils/client-only';
+import { WorkflowTimeline } from '~/components/workflow/WorkflowTimeline';
+import { Workbench } from '~/components/workbench/Workbench.client';
+import { Header } from '~/components/header/Header';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+import type { WorkflowStatus } from '~/routes/api.workflow-status.$proposalId';
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    { title: `Workflow - ${data?.proposalId || 'Unknown'}` },
+    { name: 'description', content: 'Complete workflow visualization from proposal to deployment' },
+  ];
+};
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const proposalId = params.proposalId;
+  
+  if (!proposalId) {
+    throw new Response('Proposal ID is required', { status: 400 });
+  }
+
+  // Fetch initial workflow status
+  try {
+    const baseUrl = process.env.BOLT_DIY_URL || 'http://localhost:5173';
+    const response = await fetch(`${baseUrl}/api/workflow-status/${proposalId}`, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+    
+    if (response.ok) {
+      const workflowStatus = await response.json();
+      return json({ proposalId, initialStatus: workflowStatus });
+    }
+  } catch (error) {
+    console.error('Error loading workflow status:', error);
+  }
+
+  return json({ proposalId, initialStatus: null });
+}
+
+export default function WorkflowRoute() {
+  const { proposalId, initialStatus } = useLoaderData<typeof loader>();
+  const params = useParams();
+  const finalProposalId = proposalId || params.proposalId;
+  const [workflowStatus, setWorkflowStatus] = useState<WorkflowStatus | null>(initialStatus);
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+
+  useEffect(() => {
+    if (!finalProposalId) return;
+
+    // Set up EventSource for real-time updates
+    const baseUrl = window.location.origin;
+    const eventSource = new EventSource(`${baseUrl}/api/workflow-status/${finalProposalId}?stream=true`);
+
+    eventSource.onopen = () => {
+      setIsConnected(true);
+      setLastUpdate(new Date());
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setWorkflowStatus(data);
+        setLastUpdate(new Date());
+        setIsConnected(true);
+      } catch (error) {
+        console.error('Error parsing workflow status update:', error);
+      }
+    };
+
+    let pollInterval: NodeJS.Timeout | null = null;
+    
+    eventSource.onerror = (error) => {
+      console.error('EventSource error:', error);
+      setIsConnected(false);
+      eventSource.close();
+      
+      // Fallback to polling if EventSource fails
+      pollInterval = setInterval(async () => {
+        try {
+          const response = await fetch(`${baseUrl}/api/workflow-status/${finalProposalId}`);
+          if (response.ok) {
+            const data = await response.json();
+            setWorkflowStatus(data);
+            setLastUpdate(new Date());
+            setIsConnected(true);
+          }
+        } catch (error) {
+          console.error('Error polling workflow status:', error);
+          setIsConnected(false);
+        }
+      }, 5000);
+    };
+
+    return () => {
+      eventSource.close();
+      if (pollInterval) {
+        clearInterval(pollInterval);
+      }
+    };
+  }, [finalProposalId]);
+
+  if (!finalProposalId) {
+    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">
+          <h1 className="text-2xl font-bold text-bolt-elements-textPrimary mb-4">Error</h1>
+          <p className="text-bolt-elements-textSecondary">Proposal ID is required</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+      <BackgroundRays />
+      <Header />
+      <div className="flex-1 overflow-hidden flex">
+        {/* Workbench - Code Editor */}
+        <div className="flex-1 min-w-0">
+          <ClientOnly fallback={<div className="h-full flex items-center justify-center text-bolt-elements-textSecondary">Loading workbench...</div>}>
+            {() => <Workbench chatStarted={true} />}
+          </ClientOnly>
+        </div>
+        
+        {/* Workflow Timeline Sidebar */}
+        <div className="w-96 border-l border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 overflow-auto">
+          <div className="p-6">
+            <div className="mb-6">
+              <div className="flex items-center justify-between mb-2">
+                <h1 className="text-2xl font-bold text-bolt-elements-textPrimary">
+                  Workflow Status
+                </h1>
+                <div className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} title={isConnected ? 'Connected' : 'Disconnected'} />
+                  <span className="text-xs text-bolt-elements-textSecondary">
+                    {isConnected ? 'Live' : 'Polling'} • {lastUpdate.toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Proposal ID: {finalProposalId}
+              </p>
+            </div>
+            
+            {workflowStatus ? (
+              <WorkflowTimeline workflowStatus={workflowStatus} />
+            ) : (
+              <div className="bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor rounded-lg p-8 text-center">
+                <p className="text-bolt-elements-textSecondary">
+                  Loading workflow status...
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

tools/bolt.diy/app/styles/animations.scss

@@ -0,0 +1,49 @@
+.animated {
+  animation-fill-mode: both;
+  animation-duration: var(--animate-duration, 0.2s);
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+  &.fadeInRight {
+    animation-name: fadeInRight;
+  }
+
+  &.fadeOutRight {
+    animation-name: fadeOutRight;
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.dropdown-animation {
+  opacity: 0;
+  animation: fadeMoveDown 0.15s forwards;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeMoveDown {
+  to {
+    opacity: 1;
+    transform: translateY(6px);
+  }
+}

tools/bolt.diy/app/styles/components/code.scss

@@ -0,0 +1,9 @@
+.actions .shiki {
+  background-color: var(--bolt-elements-actions-code-background) !important;
+}
+
+.shiki {
+  &:not(:has(.actions), .actions *, .mcp-tool-invocation-code *) {
+    background-color: var(--bolt-elements-messages-code-background) !important;
+  }
+}

tools/bolt.diy/app/styles/components/editor.scss

@@ -0,0 +1,135 @@
+:root {
+  --cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-bg-depth-1));
+  --cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-elements-textPrimary));
+
+  /* Gutter */
+
+  --cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
+  --cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-elements-textSecondary));
+  --cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
+
+  /* Fold Gutter */
+
+  --cm-foldGutter-textColor: var(--bolt-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
+  --cm-foldGutter-textColorHover: var(--bolt-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
+
+  /* Active Line */
+
+  --cm-activeLineBackgroundColor: var(--bolt-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
+
+  /* Cursor */
+
+  --cm-cursor-width: 2px;
+  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-elements-textSecondary));
+
+  /* Matching Brackets */
+
+  --cm-matching-bracket: var(--bolt-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
+
+  /* Selection */
+
+  --cm-selection-backgroundColorFocused: var(--bolt-elements-editor-selection-backgroundColor, #42b4ff);
+  --cm-selection-backgroundOpacityFocused: var(--bolt-elements-editor-selection-backgroundOpacity, 0.3);
+  --cm-selection-backgroundColorBlured: var(--bolt-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
+  --cm-selection-backgroundOpacityBlured: var(--bolt-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
+
+  /* Panels */
+
+  --cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-borderColor));
+
+  /* Search */
+
+  --cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
+  --cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-textSecondary));
+  --cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
+
+  --cm-search-closeButton-backgroundColorHover: var(
+    --bolt-elements-editor-search-closeButton-backgroundColorHover,
+    var(--bolt-elements-item-backgroundActive)
+  );
+
+  --cm-search-closeButton-textColor: var(
+    --bolt-elements-editor-search-closeButton-textColor,
+    var(--bolt-elements-item-contentDefault)
+  );
+
+  --cm-search-closeButton-textColorHover: var(
+    --bolt-elements-editor-search-closeButton-textColorHover,
+    var(--bolt-elements-item-contentActive)
+  );
+
+  --cm-search-button-backgroundColor: var(
+    --bolt-elements-editor-search-button-backgroundColor,
+    var(--bolt-elements-item-backgroundDefault)
+  );
+
+  --cm-search-button-backgroundColorHover: var(
+    --bolt-elements-editor-search-button-backgroundColorHover,
+    var(--bolt-elements-item-backgroundActive)
+  );
+
+  --cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-elements-textSecondary));
+
+  --cm-search-button-textColorHover: var(
+    --bolt-elements-editor-search-button-textColorHover,
+    var(--bolt-elements-textPrimary)
+  );
+
+  --cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-borderColorHover: var(--bolt-elements-editor-search-button-borderColorHover, transparent);
+
+  --cm-search-button-borderColorFocused: var(
+    --bolt-elements-editor-search-button-borderColorFocused,
+    var(--bolt-elements-borderColorActive)
+  );
+
+  --cm-search-input-backgroundColor: var(--bolt-elements-editor-search-input-backgroundColor, transparent);
+  --cm-search-input-textColor: var(--bolt-elements-editor-search-input-textColor, var(--bolt-elements-textPrimary));
+  --cm-search-input-borderColor: var(--bolt-elements-editor-search-input-borderColor, var(--bolt-elements-borderColor));
+
+  --cm-search-input-borderColorFocused: var(
+    --bolt-elements-editor-search-input-borderColorFocused,
+    var(--bolt-elements-borderColorActive)
+  );
+
+  /* Tooltip */
+
+  --cm-tooltip-backgroundColor: var(--bolt-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
+  --cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-elements-textPrimary));
+
+  --cm-tooltip-backgroundColorSelected: var(
+    --bolt-elements-editor-tooltip-backgroundColorSelected,
+    theme('colors.alpha.accent.30')
+  );
+
+  --cm-tooltip-textColorSelected: var(
+    --bolt-elements-editor-tooltip-textColorSelected,
+    var(--bolt-elements-textPrimary)
+  );
+
+  --cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-borderColor));
+
+  --cm-searchMatch-backgroundColor: var(--bolt-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
+}
+
+html[data-theme='light'] {
+  --bolt-elements-editor-gutter-textColor: #237893;
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
+  --bolt-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
+  --bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
+  --bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
+}
+
+html[data-theme='dark'] {
+  --cm-backgroundColor: var(--bolt-elements-bg-depth-2);
+  --bolt-elements-editor-gutter-textColor: var(--bolt-elements-textTertiary);
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textSecondary);
+  --bolt-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
+  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
+  --bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
+  --bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
+}

tools/bolt.diy/app/styles/components/resize-handle.scss

@@ -0,0 +1,30 @@
+@use '../z-index';
+
+[data-resize-handle] {
+  position: relative;
+
+  &[data-panel-group-direction='horizontal']:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -6px;
+    right: -5px;
+    z-index: z-index.$zIndexMax;
+  }
+
+  &[data-panel-group-direction='vertical']:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -5px;
+    bottom: -6px;
+    z-index: z-index.$zIndexMax;
+  }
+
+  &[data-resize-handle-state='hover']:after,
+  &[data-resize-handle-state='drag']:after {
+    background-color: #8882;
+  }
+}

tools/bolt.diy/app/styles/components/terminal.scss

@@ -0,0 +1,3 @@
+.xterm {
+  padding: 1rem;
+}

tools/bolt.diy/app/styles/components/toast.scss

@@ -0,0 +1,23 @@
+@use '../z-index';
+
+.Toastify__toast-container {
+  @extend .z-toast;
+}
+
+.Toastify__toast {
+  --at-apply: shadow-md;
+
+  background-color: var(--bolt-elements-bg-depth-2);
+  color: var(--bolt-elements-textPrimary);
+  border: 1px solid var(--bolt-elements-borderColor);
+}
+
+.Toastify__close-button {
+  color: var(--bolt-elements-item-contentDefault);
+  opacity: 1;
+  transition: none;
+
+  &:hover {
+    color: var(--bolt-elements-item-contentActive);
+  }
+}

tools/bolt.diy/app/styles/diff-view.css

@@ -0,0 +1,72 @@
+.diff-panel-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.diff-panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+/* Hide scrollbar for the left panel when not hovered */
+.diff-panel:not(:hover) .diff-panel-content::-webkit-scrollbar {
+  display: none;
+}
+
+.diff-panel:not(:hover) .diff-panel-content {
+  scrollbar-width: none;
+}
+
+/* Estilos para as linhas de diff */
+.diff-block-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-block-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+}
+
+/* Melhorar contraste para mudanças */
+.diff-panel-content .group:hover .diff-block-added {
+  @apply bg-green-500/30;
+}
+
+.diff-panel-content .group:hover .diff-block-removed {
+  @apply bg-red-500/30;
+}
+
+/* Estilos unificados para ambas as visualizações */
+.diff-line {
+  @apply flex group min-w-fit transition-colors duration-150;
+}
+
+.diff-line-number {
+  @apply w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-bolt-elements-textTertiary border-r border-bolt-elements-borderColor bg-bolt-elements-background-depth-1;
+}
+
+.diff-line-content {
+  @apply px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary;
+}
+
+/* Cores específicas para adições/remoções */
+.diff-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+}

tools/bolt.diy/app/styles/index.scss

@@ -0,0 +1,73 @@
+@use 'variables.scss';
+@use 'z-index.scss';
+@use 'animations.scss';
+@use 'components/terminal.scss';
+@use 'components/resize-handle.scss';
+@use 'components/code.scss';
+@use 'components/editor.scss';
+@use 'components/toast.scss';
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  background-color: var(--bolt-elements-bg-depth-1);
+}
+
+:root {
+  --gradient-opacity: 0.8;
+  --primary-color: rgba(158, 117, 240, var(--gradient-opacity));
+  --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
+  --accent-color: rgba(128, 59, 239, var(--gradient-opacity));
+  // --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
+  // --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
+  // --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
+}
+
+.modern-scrollbar {
+  overflow: auto;
+
+  // WebKit scrollbar styling
+  &::-webkit-scrollbar {
+    width: 2px;
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    // Use CSS variables for colors
+    background-color: var(--modern-scrollbar-thumb-background);
+    border-radius: 9999px; // pill shape
+    border: 2px solid transparent; // for padding-like effect
+    background-clip: content-box;
+    transition: background-color 0.2s ease-in-out; // Add transition
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    // Use CSS variable for hover color
+    background-color: var(--modern-scrollbar-thumb-backgroundHover);
+  }
+
+  // Firefox support
+  scrollbar-width: thin;
+  // Use CSS variables for Firefox colors
+  scrollbar-color: var(--modern-scrollbar-thumb-backgroundHover) transparent; // Use hover color for thumb for consistency
+}
+
+.modern-scrollbar-invert {
+  &::-webkit-scrollbar-thumb {
+    // Override with a contrasting color, e.g., primary text color with transparency
+    background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    // Darker/more opaque version on hover
+    background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
+  }
+
+  // Firefox support for inverted colors
+  scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
+}