@autobe/ui 0.21.0 → 0.22.1

package/src/components/events/AutoBeCorrectEventMovie.tsx

@@ -0,0 +1,368 @@
+import {
+  AutoBePrismaCorrectEvent,
+  AutoBeRealizeAuthorizationCorrectEvent,
+  AutoBeRealizeCorrectEvent,
+  AutoBeTestCorrectEvent,
+} from "@autobe/interface";
+import React from "react";
+
+import { EventCard, EventContent, EventHeader } from "./common";
+
+/** Props interface for AutoBeCorrectEventMovie component */
+export interface IAutoBeCorrectEventMovieProps {
+  /** Correct event to display */
+  event:
+    | AutoBePrismaCorrectEvent
+    | AutoBeTestCorrectEvent
+    | AutoBeRealizeCorrectEvent
+    | AutoBeRealizeAuthorizationCorrectEvent;
+}
+
+/** Event type definition */
+type CorrectEventType =
+  | "prismaCorrect"
+  | "testCorrect"
+  | "realizeCorrect"
+  | "realizeAuthorizationCorrect";
+
+/** Get step configuration based on event type */
+function getStepConfig(eventType: CorrectEventType): {
+  title: string;
+  description: string;
+} {
+  switch (eventType) {
+    case "prismaCorrect":
+      return {
+        title: "Prisma Schema Corrected",
+        description: "Database schema has been successfully corrected",
+      };
+    case "testCorrect":
+      return {
+        title: "Test Code Corrected",
+        description: "Test implementation has been successfully corrected",
+      };
+    case "realizeCorrect":
+      return {
+        title: "Implementation Corrected",
+        description: "API implementation has been successfully corrected",
+      };
+    case "realizeAuthorizationCorrect":
+      return {
+        title: "Authorization Corrected",
+        description: "Authorization logic has been successfully corrected",
+      };
+    default:
+      eventType satisfies never;
+      throw new Error(`Unknown event type: ${eventType}`);
+  }
+}
+
+/** Get additional details section based on event type */
+function getEventDetails(
+  event: IAutoBeCorrectEventMovieProps["event"],
+): React.ReactElement | null {
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+  };
+
+  const sectionStyle: React.CSSProperties = {
+    backgroundColor: "#f0fdf4",
+    padding: "1rem",
+    borderRadius: "0.5rem",
+    border: "1px solid #bbf7d0",
+  };
+
+  const headerStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    marginBottom: "0.75rem",
+    fontSize: "0.875rem",
+    fontWeight: "600",
+    color: "#16a34a",
+  };
+
+  const infoItemStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.5rem",
+    backgroundColor: "#f8fafc",
+    borderRadius: "0.25rem",
+    fontSize: "0.75rem",
+    color: "#475569",
+    marginBottom: "0.5rem",
+  };
+
+  const labelStyle: React.CSSProperties = {
+    fontWeight: "500",
+    color: "#64748b",
+  };
+
+  const valueStyle: React.CSSProperties = {
+    fontFamily: "monospace",
+    backgroundColor: "#e2e8f0",
+    padding: "0.125rem 0.375rem",
+    borderRadius: "0.25rem",
+    fontSize: "0.625rem",
+  };
+
+  const codeBlockStyle: React.CSSProperties = {
+    backgroundColor: "#f1f5f9",
+    border: "1px solid #e2e8f0",
+    borderRadius: "0.375rem",
+    padding: "0.75rem",
+    marginTop: "0.5rem",
+    fontSize: "0.75rem",
+    fontFamily: "monospace",
+    color: "#475569",
+    maxHeight: "120px",
+    overflowY: "auto",
+    lineHeight: "1.4",
+    whiteSpace: "pre-wrap",
+  };
+
+  const badgeStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "0.25rem 0.5rem",
+    backgroundColor: "#dcfce7",
+    color: "#16a34a",
+    borderRadius: "0.375rem",
+    fontSize: "0.75rem",
+    fontWeight: "500",
+    border: "1px solid #bbf7d0",
+  };
+
+  switch (event.type) {
+    case "prismaCorrect":
+      const prismaEvent = event as IAutoBeCorrectEventMovieProps["event"] & {
+        type: "prismaCorrect";
+      };
+      return (
+        <div style={containerStyle}>
+          <div style={sectionStyle}>
+            <div style={headerStyle}>
+              🗄️ <span>Database Schema Corrections</span>
+            </div>
+
+            <div style={infoItemStyle}>
+              <span style={labelStyle}>Analysis Step:</span>
+              <span style={valueStyle}>Step {prismaEvent.step}</span>
+            </div>
+
+            {prismaEvent.planning && (
+              <div>
+                <div style={labelStyle}>🎯 Correction Strategy:</div>
+                <div style={codeBlockStyle}>{prismaEvent.planning}</div>
+              </div>
+            )}
+
+            {prismaEvent.failure && (
+              <div>
+                <div style={labelStyle}>⚠️ Validation Issues:</div>
+                <div style={codeBlockStyle}>
+                  {JSON.stringify(prismaEvent.failure, null, 2)}
+                </div>
+              </div>
+            )}
+
+            <div style={{ marginTop: "0.75rem" }}>
+              <span style={badgeStyle}>✓ Schema Validated</span>
+            </div>
+          </div>
+        </div>
+      );
+
+    case "testCorrect":
+      const testEvent = event as IAutoBeCorrectEventMovieProps["event"] & {
+        type: "testCorrect";
+      };
+      return (
+        <div style={containerStyle}>
+          <div style={sectionStyle}>
+            <div style={headerStyle}>
+              🧪 <span>Test Suite Corrections</span>
+            </div>
+
+            <div style={infoItemStyle}>
+              <span style={labelStyle}>Analysis Step:</span>
+              <span style={valueStyle}>Step {testEvent.step}</span>
+            </div>
+
+            {testEvent.file?.location && (
+              <div style={infoItemStyle}>
+                <span style={labelStyle}>Test File:</span>
+                <span style={valueStyle}>{testEvent.file.location}</span>
+              </div>
+            )}
+
+            {testEvent.think && (
+              <div>
+                <div style={labelStyle}>🔄 Analysis:</div>
+                <div style={codeBlockStyle}>{testEvent.think}</div>
+              </div>
+            )}
+
+            {testEvent.review && (
+              <div>
+                <div style={labelStyle}>📋 Review Results:</div>
+                <div style={codeBlockStyle}>{testEvent.review}</div>
+              </div>
+            )}
+
+            <div style={{ marginTop: "0.75rem" }}>
+              <span style={badgeStyle}>✓ Tests Corrected</span>
+            </div>
+          </div>
+        </div>
+      );
+
+    case "realizeCorrect":
+      const realizeEvent = event as IAutoBeCorrectEventMovieProps["event"] & {
+        type: "realizeCorrect";
+      };
+      return (
+        <div style={containerStyle}>
+          <div style={sectionStyle}>
+            <div style={headerStyle}>
+              ⚙️ <span>Implementation Corrections</span>
+            </div>
+
+            <div style={infoItemStyle}>
+              <span style={labelStyle}>Analysis Step:</span>
+              <span style={valueStyle}>Step {realizeEvent.step}</span>
+            </div>
+
+            <div style={infoItemStyle}>
+              <span style={labelStyle}>File Location:</span>
+              <span style={valueStyle}>{realizeEvent.location}</span>
+            </div>
+
+            {realizeEvent.content && (
+              <div>
+                <div style={labelStyle}>📄 Corrected Implementation:</div>
+                <div style={codeBlockStyle}>
+                  {realizeEvent.content.slice(0, 500)}
+                  {realizeEvent.content.length > 500 && "..."}
+                </div>
+              </div>
+            )}
+
+            <div style={{ marginTop: "0.75rem" }}>
+              <span style={badgeStyle}>✓ Implementation Fixed</span>
+            </div>
+          </div>
+        </div>
+      );
+
+    case "realizeAuthorizationCorrect":
+      const authEvent = event as IAutoBeCorrectEventMovieProps["event"] & {
+        type: "realizeAuthorizationCorrect";
+      };
+      return (
+        <div style={containerStyle}>
+          <div style={sectionStyle}>
+            <div style={headerStyle}>
+              🔐 <span>Authorization Corrections</span>
+            </div>
+
+            <div style={infoItemStyle}>
+              <span style={labelStyle}>Analysis Step:</span>
+              <span style={valueStyle}>Step {authEvent.step}</span>
+            </div>
+
+            {authEvent.authorization && (
+              <div style={infoItemStyle}>
+                <span style={labelStyle}>Authorization Module:</span>
+                <span style={valueStyle}>
+                  {JSON.stringify(authEvent.authorization).slice(0, 50)}...
+                </span>
+              </div>
+            )}
+
+            {authEvent.result && (
+              <div>
+                <div style={labelStyle}>⚠️ Compilation Issues:</div>
+                <div style={codeBlockStyle}>
+                  {JSON.stringify(authEvent.result, null, 2)}
+                </div>
+              </div>
+            )}
+
+            <div style={{ marginTop: "0.75rem" }}>
+              <span style={badgeStyle}>✓ Authorization Secured</span>
+            </div>
+          </div>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}
+
+/** Component for displaying correction events */
+export const AutoBeCorrectEventMovie = (
+  props: IAutoBeCorrectEventMovieProps,
+) => {
+  const eventType = props.event.type;
+  const config = getStepConfig(eventType);
+  const eventDetails = getEventDetails(props.event);
+
+  return (
+    <EventCard variant="success">
+      <EventHeader
+        title={config.title}
+        subtitle={config.description}
+        timestamp={props.event.created_at}
+        iconType="success"
+      />
+      <EventContent>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.75rem",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+            }}
+          >
+            <span
+              style={{
+                color: "#16a34a",
+                fontWeight: "600",
+                fontSize: "0.875rem",
+              }}
+            >
+              ✓ Correction Applied
+            </span>
+          </div>
+
+          <div
+            style={{
+              fontSize: "0.875rem",
+              color: "#475569",
+              lineHeight: "1.5",
+            }}
+          >
+            The system has automatically detected and corrected issues in the
+            code. The corrected version is now ready for the next step.
+          </div>
+
+          {/* Additional details based on event type */}
+          {eventDetails}
+        </div>
+      </EventContent>
+    </EventCard>
+  );
+};
+
+export default AutoBeCorrectEventMovie;

package/src/{events → components/events}/AutoBeEventMovie.tsx

@@ -1,20 +1,22 @@
-import { AutoBeEvent, IAutoBeGetFilesOptions } from "@autobe/interface";
+import { AutoBeEvent } from "@autobe/interface";
 
 import {
   AutoBeCompleteEventMovie,
+  AutoBeCorrectEventMovie,
   AutoBeProgressEventMovie,
   AutoBeScenarioEventMovie,
   AutoBeStartEventMovie,
   AutoBeValidateEventMovie,
+  CorrectEventGroup,
+  ICorrectEventGroupProps,
   IValidateEventGroupProps,
   ValidateEventGroup,
 } from ".";
-import { AutoBeAssistantMessageMovie, AutoBeUserMessageMovie } from "..";
+import { useAutoBeAgent } from "../../context/AutoBeAgentContext";
+import { AutoBeAssistantMessageMovie } from "../AutoBeAssistantMessageMovie";
+import { AutoBeUserMessageMovie } from "../AutoBeUserMessageMovie";
 
 export interface IAutoBeEventMovieProps<Event extends AutoBeEvent> {
-  getFiles: (
-    options?: Partial<IAutoBeGetFilesOptions>,
-  ) => Promise<Record<string, string>>;
   events: Event[];
   last: boolean;
 }
@@ -22,6 +24,8 @@ export interface IAutoBeEventMovieProps<Event extends AutoBeEvent> {
 export function AutoBeEventMovie<Event extends AutoBeEvent>(
   props: IAutoBeEventMovieProps<Event>,
 ) {
+  const { service } = useAutoBeAgent();
+
   const back: Event = props.events[props.events.length - 1]!;
   switch (back.type) {
     case "userMessage":
@@ -89,14 +93,26 @@ export function AutoBeEventMovie<Event extends AutoBeEvent>(
     case "testComplete":
     case "realizeComplete":
       return (
-        <AutoBeCompleteEventMovie getFiles={props.getFiles} event={back} />
+        <AutoBeCompleteEventMovie getFiles={service.getFiles} event={back} />
       );
-    // DISCARD
+    // CORRECT EVENTS
     case "prismaCorrect":
-    case "interfaceEndpointsReview":
     case "testCorrect":
-    case "realizeAuthorizationCorrect":
     case "realizeCorrect":
+    case "realizeAuthorizationCorrect": {
+      if (props.events.length === 1) {
+        return <AutoBeCorrectEventMovie event={back} />;
+      }
+
+      return (
+        <CorrectEventGroup
+          events={props.events as ICorrectEventGroupProps["events"]}
+          defaultCollapsed={true}
+        />
+      );
+    }
+    // DISCARD
+    case "interfaceEndpointsReview":
     case "realizeTestComplete":
     case "realizeAuthorizationComplete":
     case "vendorRequest":

package/src/{events → components/events}/AutoBeValidateEventMovie.tsx

@@ -30,13 +30,13 @@ export const AutoBeValidateEventMovie = (
 
   const getCardVariant = () => {
     if (isSuccess) return "success";
-    if (isError) return "error";
+    if (isError) return "warning";
     return "warning";
   };
 
   const getIconType = () => {
     if (isSuccess) return "success";
-    if (isError) return "error";
+    if (isError) return "warning";
     return "warning";
   };
 

package/src/{events → components/events}/common/CollapsibleEventGroup.tsx

@@ -143,16 +143,7 @@ export const CollapsibleEventGroup = <T,>(
           }}
         >
           {events.map((event, index) => (
-            <div
-              key={index}
-              style={{
-                border: "1px solid #e2e8f0",
-                borderRadius: "0.5rem",
-                overflow: "hidden",
-              }}
-            >
-              {renderEvent(event, index)}
-            </div>
+            <div key={index}>{renderEvent(event, index)}</div>
           ))}
         </div>
       )}

package/src/{events → components/events}/common/EventHeader.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { formatTime } from "../../utils/time";
+import { formatTime } from "../../../utils/time";
 import { EventIcon, EventIconType } from "./EventIcon";
 
 export interface IEventHeaderProps {

package/src/{events → components/events}/common/ProgressBar.tsx

@@ -21,7 +21,8 @@ export const ProgressBar = (props: IProgressBarProps) => {
     showLabel = true,
   } = props;
 
-  const percentage = Math.round((current / total) * 100);
+  const calibratedCurrent = current > total ? total : current;
+  const percentage = Math.round((calibratedCurrent / total) * 100);
 
   return (
     <>
@@ -53,7 +54,7 @@ export const ProgressBar = (props: IProgressBarProps) => {
             textAlign: "center",
           }}
         >
-          {current} / {total} completed
+          {calibratedCurrent} / {total} completed
         </div>
       )}
     </>

package/src/components/events/groups/CorrectEventGroup.tsx

@@ -0,0 +1,183 @@
+import {
+  AutoBePrismaCorrectEvent,
+  AutoBeRealizeAuthorizationCorrectEvent,
+  AutoBeRealizeCorrectEvent,
+  AutoBeTestCorrectEvent,
+} from "@autobe/interface";
+
+import { AutoBeCorrectEventMovie } from "../AutoBeCorrectEventMovie";
+import { CollapsibleEventGroup } from "../common/CollapsibleEventGroup";
+
+type CorrectEvent =
+  | AutoBePrismaCorrectEvent
+  | AutoBeTestCorrectEvent
+  | AutoBeRealizeCorrectEvent
+  | AutoBeRealizeAuthorizationCorrectEvent;
+
+export interface ICorrectEventGroupProps {
+  events: CorrectEvent[];
+  defaultCollapsed?: boolean;
+}
+
+/**
+ * Specialized group component for correction events Shows correction summary
+ * and statistics
+ */
+export const CorrectEventGroup = (props: ICorrectEventGroupProps) => {
+  const { events, defaultCollapsed = true } = props;
+
+  if (events.length === 0) {
+    return null;
+  }
+
+  // Calculate correction statistics
+  const eventTypes = Array.from(new Set(events.map((e) => e.type)));
+  const eventTypeCounts = eventTypes.reduce(
+    (acc, type) => {
+      acc[type] = events.filter((e) => e.type === type).length;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  // Get latest step numbers for each event type
+  const latestSteps = eventTypes.reduce(
+    (acc, type) => {
+      const eventsOfType = events.filter((e) => e.type === type);
+      acc[type] = Math.max(...eventsOfType.map((e) => e.step));
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+
+  const renderSummary = (events: CorrectEvent[]) => (
+    <>
+      Correction events showing AI self-improvement feedback loop
+      <br />
+      <br />
+      <strong>Success Rate:</strong> 100% (All corrections applied successfully)
+      <br />
+      <strong>Total Corrections:</strong> {events.length} events
+      <br />
+      <strong>Event Types:</strong> {eventTypes.join(", ")}
+      <br />
+      <br />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem",
+        }}
+      >
+        {eventTypes.map((type) => {
+          const typeDisplayNames = {
+            prismaCorrect: "🗄️ Database Schema",
+            testCorrect: "🧪 Test Suite",
+            realizeCorrect: "⚙️ Implementation",
+            realizeAuthorizationCorrect: "🔐 Authorization",
+          };
+
+          return (
+            <div
+              key={type}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "0.5rem",
+                backgroundColor: "#f0fdf4",
+                borderRadius: "0.25rem",
+                border: "1px solid #bbf7d0",
+              }}
+            >
+              <span style={{ fontSize: "0.75rem", fontWeight: "500" }}>
+                {typeDisplayNames[type as keyof typeof typeDisplayNames] ||
+                  type}
+              </span>
+              <div
+                style={{ display: "flex", gap: "1rem", alignItems: "center" }}
+              >
+                <span style={{ fontSize: "0.75rem", color: "#16a34a" }}>
+                  {eventTypeCounts[type]} corrections
+                </span>
+                <span
+                  style={{
+                    fontSize: "0.625rem",
+                    color: "#64748b",
+                    fontFamily: "monospace",
+                    backgroundColor: "#e2e8f0",
+                    padding: "0.125rem 0.375rem",
+                    borderRadius: "0.25rem",
+                  }}
+                >
+                  Step {latestSteps[type]}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <br />
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <div
+            style={{
+              width: "12px",
+              height: "12px",
+              backgroundColor: "#16a34a",
+              borderRadius: "2px",
+            }}
+          />
+          <span style={{ fontSize: "0.75rem" }}>
+            Corrected: {events.length}
+          </span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.25rem",
+          }}
+        >
+          <div
+            style={{
+              width: "12px",
+              height: "12px",
+              backgroundColor: "#10b981",
+              borderRadius: "2px",
+            }}
+          />
+          <span style={{ fontSize: "0.75rem" }}>Self-Improvement Active</span>
+        </div>
+      </div>
+    </>
+  );
+
+  return (
+    <CollapsibleEventGroup
+      events={events}
+      title="Correction Events"
+      iconType="success"
+      variant="success"
+      getTimestamp={(event) => event.created_at}
+      renderEvent={(event) => <AutoBeCorrectEventMovie event={event} />}
+      renderSummary={renderSummary}
+      defaultCollapsed={defaultCollapsed}
+      description="AI self-correction and improvement events"
+    />
+  );
+};
+
+export default CorrectEventGroup;