@manta-eu/react 0.1.9 → 0.1.10

package/src/components/plan-row/index.tsx

@@ -0,0 +1,178 @@
+import type { GQLIntegration } from "@manta-eu/client";
+import { humanCount, humanNumber } from "@manta-eu/lib/humanize";
+import { Clock, Ellipsis, Zap } from "lucide-react";
+import type { ElementType } from "react";
+import { match } from "ts-pattern";
+import { Link } from "../button";
+import { ChannelIcon } from "../channel-icon";
+import { integrationToChannel } from "../planning/plan-detail-utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { cn } from "#style";
+
+export type PlanState = "DRAFT" | "RUNNING" | "FAILED" | "TIMED_OUT" | "COMPLETED";
+
+export type PlanHowTo = {
+  name?: string | null;
+  step?: Array<unknown> | null;
+  totalTime?: string | null;
+  performTime?: string | null;
+};
+
+export type PlanRowPlan = {
+  iri: string;
+  state?: PlanState | null;
+  primaryIntegration?: GQLIntegration | null;
+  actionCount: number;
+  completedActionCount: number;
+  subjects: number;
+  duration?: string | null;
+  howTo?: PlanHowTo | null;
+  pendingApprovalLabel?: string | null;
+};
+
+export type PlanRowProps = {
+  plan: PlanRowPlan;
+  href: string;
+  component?: ElementType;
+  className?: string;
+};
+
+function isActivePlan(state: PlanState | null | undefined): boolean {
+  const effectiveState = state ?? "DRAFT";
+  return effectiveState === "RUNNING" || effectiveState === "FAILED" || effectiveState === "TIMED_OUT";
+}
+
+function getStatusConfig(state: PlanState | null | undefined) {
+  return match(state ?? "DRAFT")
+    .with("RUNNING", () => ({ label: "Running", dotClass: "bg-warning-foreground" }))
+    .with("FAILED", "TIMED_OUT", () => ({ label: "Failed", dotClass: "bg-error-foreground" }))
+    .with("COMPLETED", () => ({ label: "Completed", dotClass: "bg-success-foreground" }))
+    .with("DRAFT", () => ({ label: "Ready to launch", dotClass: "bg-muted-foreground" }))
+    .exhaustive();
+}
+
+function formatIsoDuration(iso: string | null | undefined): string | null {
+  if (!iso) return null;
+  const durationMatch = iso.match(/^PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?$/i);
+  if (!durationMatch) return null;
+  const hours = parseInt(durationMatch[1] || "0", 10);
+  const minutes = parseInt(durationMatch[2] || "0", 10);
+  const seconds = parseInt(durationMatch[3] || "0", 10);
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0 && seconds > 0) return `${minutes}m ${seconds}s`;
+  if (minutes > 0) return `~${minutes} min`;
+  if (seconds > 0) return `${seconds}s`;
+  return null;
+}
+
+function getActionCount(plan: PlanRowPlan): string {
+  const total = plan.actionCount;
+  const completed = plan.completedActionCount;
+
+  if (total > 0 && isActivePlan(plan.state)) {
+    return `${humanNumber(completed)}/${humanNumber(total)}`;
+  }
+  if (total > 0) {
+    return humanCount(total, "action");
+  }
+
+  const stepCount = plan.howTo?.step?.length ?? 0;
+  if (stepCount > 0) return humanCount(stepCount, "action");
+  if (plan.subjects > 0) return humanCount(plan.subjects, "action");
+  return "";
+}
+
+function getTimeEstimate(plan: PlanRowPlan): string | null {
+  const totalTime = plan.howTo?.totalTime ?? plan.howTo?.performTime ?? plan.duration;
+  return formatIsoDuration(totalTime);
+}
+
+function extractPlanName(iri: string): string {
+  const lastHash = iri.lastIndexOf("#");
+  const lastSlash = iri.lastIndexOf("/");
+  const separator = Math.max(lastHash, lastSlash);
+  return separator > -1 ? iri.slice(separator + 1) : iri;
+}
+
+export function PlanRow(props: PlanRowProps) {
+  const { plan, href, component, className } = props;
+  const status = getStatusConfig(plan.state);
+  const channel = plan.primaryIntegration ? integrationToChannel(plan.primaryIntegration) : null;
+  const actionCount = getActionCount(plan);
+  const timeEstimate = getTimeEstimate(plan);
+  const planName = plan.howTo?.name ?? extractPlanName(plan.iri);
+
+  const needsApproval = plan.state === "RUNNING" && !!plan.pendingApprovalLabel;
+  const statusDotClass = needsApproval ? "bg-accent-foreground" : status.dotClass;
+  const statusLabel = needsApproval ? plan.pendingApprovalLabel : status.label;
+
+  return (
+    <Link
+      component={component}
+      href={href}
+      variant="ghost"
+      rounded="lg"
+      className={cn(
+        "h-auto w-full justify-start gap-3 rounded-xl border border-muted-border bg-faint p-3 text-left",
+        "transition-colors hover:bg-muted focus:ring-0 active:scale-100",
+        className,
+      )}
+    >
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent">
+        {channel ? (
+          <ChannelIcon channel={channel} iconClassName="size-5" />
+        ) : (
+          <Zap className="size-5 text-accent-foreground" />
+        )}
+      </span>
+
+      <div className="min-w-0 flex-1">
+        <p className="typography-caption-medium text-default-foreground truncate">{planName}</p>
+        <div className="flex items-center gap-1.5">
+          <span className={cn("size-2 rounded-full shrink-0", statusDotClass)} />
+          <p className="typography-tiny text-muted-foreground">{statusLabel}</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3 shrink-0">
+        {actionCount && (
+          <span className="flex items-center gap-1.5 typography-tiny-medium text-accent-foreground">
+            <Zap className="size-4" />
+            {actionCount}
+          </span>
+        )}
+        {timeEstimate && (
+          <span className="flex items-center gap-1.5 typography-tiny text-muted-foreground">
+            <Clock className="size-4" />
+            {timeEstimate}
+          </span>
+        )}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={(event) => event.preventDefault()}
+              className="p-1.5 rounded-lg text-muted-foreground hover:bg-muted transition-colors"
+            >
+              <Ellipsis className="size-5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            <p>More actions coming soon</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </Link>
+  );
+}
+
+export function NoActivePlansPill() {
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-muted-border bg-faint p-3">
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent">
+        <Zap className="size-5 text-muted-foreground" />
+      </span>
+      <p className="typography-caption-medium text-muted-foreground">No active plans at the moment</p>
+    </div>
+  );
+}

package/src/components/planning/ActionPlanDetailView.tsx

@@ -0,0 +1,213 @@
+import { GQLActionPlanState } from "@manta-eu/client";
+import { extractPlanName } from "@manta-eu/client/shared/agent-mode";
+import { isPresent } from "@manta-eu/lib/present";
+import { useState, type ReactNode } from "react";
+import { ActivityLog } from "./ActivityLog";
+import { DryRunCompleteBanner } from "./DryRunCompleteBanner";
+import { ExecutionProgressBar } from "./ExecutionProgressBar";
+import type { ActionPlan, ExecutionProgress } from "./plan-detail-utils";
+import { formatIntegration } from "./plan-detail-utils";
+import { PlanDetailFooter } from "./PlanDetailFooter";
+import { RunHistoryTable } from "./RunHistoryTable";
+import { TopBar, type PlanViewMode } from "./TopBar";
+import { UnavailablePlanNotice } from "./UnavailablePlanNotice";
+import { Loader } from "#components/loader/index";
+import { cn } from "#lib/utils";
+
+export type { EntityTypeEntry, ExecutionProgress, ActionPlan } from "./plan-detail-utils";
+
+export type ActionPlanDetailViewProps = {
+  plan: ActionPlan;
+  isLoading: boolean;
+  error: string | null;
+  execution?: ExecutionProgress | null;
+  graphSlot?: ReactNode;
+  issueCount?: number;
+  isValidating?: boolean;
+  isDryRun?: boolean;
+  hideTopBar?: boolean;
+  hideChanges?: boolean;
+  fitContent?: boolean;
+  viewMode?: PlanViewMode;
+  onViewModeChange?: (viewMode: PlanViewMode) => void;
+  onExecute?: (planIri: string) => void;
+  onCancel?: (planIri: string) => void;
+  onRerun?: (planIri: string) => void;
+  onModify?: (planIri: string) => void;
+  topBarActions?: ReactNode;
+  leadingAction?: ReactNode;
+  rulesSlot?: ReactNode;
+  changesSlot?: ReactNode;
+  onRunClick?: (activityIri: string) => void;
+};
+
+export function ActionPlanDetailView(props: ActionPlanDetailViewProps) {
+  const {
+    plan,
+    isLoading,
+    error,
+    execution,
+    graphSlot,
+    issueCount = 0,
+    isValidating = false,
+    isDryRun = false,
+    hideTopBar = false,
+    hideChanges = false,
+    fitContent = false,
+    viewMode: controlledViewMode,
+    onViewModeChange,
+    onExecute,
+    onCancel,
+    onRerun,
+    onModify,
+    topBarActions,
+    leadingAction,
+    rulesSlot,
+    changesSlot,
+    onRunClick,
+  } = props;
+
+  const status = plan.state ?? GQLActionPlanState.Draft;
+  const isDraft = status === GQLActionPlanState.Draft;
+  const planName = extractPlanName(plan.iri);
+  const formattedIntegration = plan.primaryIntegration ? formatIntegration(plan.primaryIntegration) : null;
+  const hasVisualView = graphSlot != null;
+
+  const [internalViewMode, setInternalViewMode] = useState<PlanViewMode>("overview");
+  const selectedViewMode = controlledViewMode ?? internalViewMode;
+  const activeViewMode: PlanViewMode = selectedViewMode === "visual" && !hasVisualView ? "overview" : selectedViewMode;
+  const showOverviewContent = hideTopBar || activeViewMode === "overview";
+  const showVisualContent = hasVisualView && (hideTopBar || activeViewMode === "visual");
+  const showHistoryContent = !hideTopBar && activeViewMode === "history";
+
+  function handleViewModeChange(nextViewMode: PlanViewMode) {
+    if (controlledViewMode === undefined) {
+      setInternalViewMode(nextViewMode);
+    }
+    onViewModeChange?.(nextViewMode);
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader className="size-6" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="rounded-xl border border-error-border bg-error p-4">
+          <p className="typography-small text-error-foreground">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 min-w-0 flex-col",
+        fitContent ? "shrink-0" : "h-full",
+        hideTopBar ? "bg-background" : "bg-base-background",
+        !hideTopBar && !fitContent && "overflow-hidden",
+      )}
+    >
+      {!hideTopBar && (
+        <TopBar
+          viewMode={activeViewMode}
+          onViewModeChange={handleViewModeChange}
+          hasVisualView={hasVisualView}
+          issueCount={issueCount}
+          isValidating={isValidating}
+          isDryRun={isDryRun}
+          planName={planName}
+          status={status}
+          hasCurrentFacts={plan.hasCurrentFacts}
+          planIri={plan.iri}
+          onExecute={onExecute}
+          onCancel={onCancel}
+          onRerun={onRerun}
+          onModify={onModify}
+          topBarActions={topBarActions}
+          leadingAction={leadingAction}
+        />
+      )}
+
+      {!hideTopBar && showOverviewContent && isDryRun && status === GQLActionPlanState.Completed && (
+        <DryRunCompleteBanner />
+      )}
+
+      <div className={cn("min-w-0 overflow-x-hidden", !fitContent && "flex-1 overflow-y-auto")}>
+        <div className="mx-auto w-full max-w-7xl px-8 py-6">
+          <div className="space-y-6">
+            {!plan.hasCurrentFacts && <UnavailablePlanNotice hasExecutionHistory={plan.hasExecutionHistory} />}
+
+            {showOverviewContent && (
+              <>
+                <div>
+                  <h1 className="typography-subheading text-default-foreground truncate" title={planName}>
+                    {planName}
+                  </h1>
+                  {!plan.hasCurrentFacts && isPresent(plan.description) && (
+                    <p className="mt-1 typography-small text-muted-foreground">{plan.description}</p>
+                  )}
+                  {plan.hasCurrentFacts && isDraft && formattedIntegration && (
+                    <p className="mt-1 typography-small text-muted-foreground">
+                      Built from your {formattedIntegration} product data and executed on {formattedIntegration}.
+                    </p>
+                  )}
+                </div>
+
+                {execution && !isDraft && <ExecutionProgressBar execution={execution} />}
+
+                {rulesSlot}
+
+                {!hideChanges && changesSlot && (
+                  <div>
+                    <div className="mb-6 border-t border-default-border" />
+                    <h3 className="mb-4 typography-small-header text-default-foreground">Recommended changes</h3>
+                    {changesSlot}
+                  </div>
+                )}
+
+                {execution && isPresent(execution.activities) && (
+                  <div>
+                    <h3 className="mb-3 typography-caption-medium text-muted-foreground">Activity Log</h3>
+                    <ActivityLog execution={execution} />
+                  </div>
+                )}
+              </>
+            )}
+
+            {showVisualContent && (
+              <div>
+                <h3 className="mb-3 typography-caption-medium text-muted-foreground">Plan Graph</h3>
+                <div
+                  className={cn(
+                    "overflow-hidden rounded-xl border border-default-border bg-card",
+                    showOverviewContent ? "h-[500px]" : "h-[640px]",
+                  )}
+                >
+                  {graphSlot}
+                </div>
+              </div>
+            )}
+
+            {showHistoryContent && (
+              <div>
+                <h3 className="mb-3 typography-caption-medium text-muted-foreground">Run history</h3>
+                <RunHistoryTable key={plan.iri} planIris={[plan.iri]} onRunClick={onRunClick} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isDraft && (isValidating || issueCount > 0) && (
+        <PlanDetailFooter issueCount={issueCount} isValidating={isValidating} />
+      )}
+    </div>
+  );
+}

package/src/components/planning/ActioningView.tsx

@@ -0,0 +1,229 @@
+import { GQLActionPlanState, type GQLActionPlanDiffResponse } from "@manta-eu/client";
+import { extractPlanName } from "@manta-eu/client/shared/agent-mode";
+import { isPresent } from "@manta-eu/lib/present";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { deriveExecutionStatus, deriveIsDryRun, isStalePlanCompletion } from "./actioning-view-utils";
+import type { EntityTypeEntry } from "./ActionPlanDetailView";
+import { DryRunCompleteBanner } from "./DryRunCompleteBanner";
+import { parseTimestampMs } from "./execution-section-model";
+import { ExecutionSections } from "./ExecutionSections";
+import { ExecutionTopBar } from "./ExecutionTopBar";
+import { FailedBanner } from "./FailedBanner";
+import { useManualActionTargets } from "./manual-action-targets";
+import { SummaryBar } from "./SummaryBar";
+import { UnavailablePlanNotice } from "./UnavailablePlanNotice";
+import { Loader } from "#components/loader/index";
+import { useActionPlanDetail } from "#hooks/useActionPlanDetail";
+import { useActionPlanExecution, type UseActionPlanExecutionResult } from "#hooks/useActionPlanExecution";
+import { useResolveManualAction } from "#hooks/useResolveManualAction";
+import { useActionPlanDiff, useActionPlanExecutionProvenance, useManualActions } from "#ldo-ui";
+import { getPendingManualActions } from "#lib/manual-actions";
+import { cn } from "#lib/utils";
+
+type ActioningViewProps = {
+  planGraphIri: string;
+  diff: GQLActionPlanDiffResponse | null;
+  isLoading: boolean;
+  mantaChatBaseUrl: URL;
+  executionControl?: UseActionPlanExecutionResult;
+  executePromptNonce?: number;
+  datastoreId?: string;
+  userId?: string;
+  hideTopBar?: boolean;
+  hideRunControls?: boolean;
+  chatIri?: string;
+  completedChangesSlot?: ReactNode;
+};
+
+export function ActioningView(props: ActioningViewProps) {
+  const {
+    planGraphIri,
+    diff,
+    isLoading,
+    executionControl,
+    executePromptNonce,
+    datastoreId,
+    userId,
+    hideTopBar = false,
+    hideRunControls = false,
+    chatIri,
+    completedChangesSlot,
+  } = props;
+  const planName = extractPlanName(planGraphIri);
+  const [isExecuteDialogOpen, setIsExecuteDialogOpen] = useState(false);
+  const internalExecutionControl = useActionPlanExecution(planGraphIri, chatIri);
+  const { execute, isTriggered, triggeredAtMs, dryRun, workflowId, triggerError } =
+    executionControl ?? internalExecutionControl;
+
+  useEffect(() => {
+    if (hideRunControls) return;
+    if ((executePromptNonce ?? 0) > 0) {
+      setIsExecuteDialogOpen(true);
+    }
+  }, [executePromptNonce, hideRunControls]);
+
+  const { plan } = useActionPlanDetail(planGraphIri);
+  const hasCurrentFacts = plan?.hasCurrentFacts ?? false;
+
+  const { data: fetchedDiff } = useActionPlanDiff({ planGraphIri, enabled: !!planGraphIri });
+  const { data: provenance } = useActionPlanExecutionProvenance({
+    planGraphIri,
+    enabled: !!planGraphIri,
+    refetchIntervalMs: isTriggered ? 2000 : 5000,
+  });
+
+  const ldoDiff = diff ?? fetchedDiff;
+
+  const baseIsRunning =
+    !provenance?.planErrorMessage &&
+    !provenance?.planEndedAtTime &&
+    (!!provenance?.planStartedAtTime || isTriggered || plan?.state === GQLActionPlanState.Running);
+
+  const { data: manualActions = [] } = useManualActions({
+    planGraphIri,
+    enabled: !!planGraphIri,
+    refetchIntervalMs: baseIsRunning ? 3000 : 10000,
+  });
+
+  const pendingManualActionCount = getPendingManualActions(manualActions).length;
+  const executionStatus = deriveExecutionStatus({
+    provenance: provenance ?? null,
+    isTriggered,
+    triggeredAtMs,
+    planState: plan?.state ?? null,
+    pendingManualActionCount,
+  });
+  const isDryRun = deriveIsDryRun({ provenance: provenance ?? null, triggeredAtMs, dryRun });
+  const isDryRunCompleted = executionStatus === "completed" && isDryRun;
+  const stale = isStalePlanCompletion({
+    triggeredAtMs,
+    planEndedAtTime: provenance?.planEndedAtTime ?? null,
+  });
+  const planStartedAtMs = stale ? triggeredAtMs : (parseTimestampMs(provenance?.planStartedAtTime) ?? triggeredAtMs);
+  const planEndedAtMs = stale ? null : parseTimestampMs(provenance?.planEndedAtTime);
+  const isExecutionActive = executionStatus === "running" || executionStatus === "needs-approval";
+  const activeStartedAtMs = isExecutionActive ? planStartedAtMs : null;
+
+  const manualActionResolver = useResolveManualAction({ planGraphIri, userId, datastoreId });
+
+  const handleExecute = useCallback(
+    (nextDryRun: boolean) => {
+      void execute(nextDryRun);
+    },
+    [execute],
+  );
+
+  const handleConfirmRerun = useCallback(
+    async (nextDryRun: boolean) => {
+      const result = await execute(nextDryRun);
+      if (result.success) {
+        toast.success(nextDryRun ? "Plan re-run preview triggered" : "Plan re-run triggered");
+      } else {
+        toast.error(nextDryRun ? "Failed to preview plan re-run" : "Failed to re-run plan");
+      }
+    },
+    [execute],
+  );
+  const canRunPlan = !hideRunControls && hasCurrentFacts;
+  const onExecute = canRunPlan ? handleExecute : undefined;
+  const onRerun = canRunPlan ? handleConfirmRerun : undefined;
+
+  const manualActionEntities = useManualActionTargets(manualActions);
+
+  const entityTypes: EntityTypeEntry[] = useMemo(() => {
+    if (!ldoDiff) return [];
+    return ldoDiff.byTypes.map((entry) => ({
+      typeIri: entry.typeIri,
+      typeName: entry.typeName,
+      addedCount: entry.addedCount,
+      updatedCount: entry.updatedCount,
+      description: null,
+      estimatedTime: null,
+    }));
+  }, [ldoDiff]);
+
+  const effectiveEntityTypes: EntityTypeEntry[] = useMemo(() => {
+    if (isPresent(entityTypes)) return entityTypes;
+    const byType = new Map<string, EntityTypeEntry>();
+    for (const ma of manualActions) {
+      if (!byType.has(ma.typeIri)) {
+        byType.set(ma.typeIri, {
+          typeIri: ma.typeIri,
+          typeName: ma.typeName,
+          addedCount: 0,
+          updatedCount: 0,
+          description: null,
+          estimatedTime: null,
+        });
+      }
+    }
+    return Array.from(byType.values());
+  }, [entityTypes, manualActions]);
+
+  const completedChanges = executionStatus === "completed" ? completedChangesSlot : null;
+
+  return (
+    <div className={cn("flex flex-col", !hideTopBar && "h-full bg-background")}>
+      {!hideTopBar && (
+        <ExecutionTopBar
+          planName={planName}
+          status={executionStatus}
+          workflowId={workflowId}
+          triggerError={triggerError}
+          onExecute={onExecute}
+          onRerun={onRerun}
+          isExecuteDialogOpen={isExecuteDialogOpen}
+          onExecuteDialogOpenChange={setIsExecuteDialogOpen}
+          isDryRun={isDryRun}
+        />
+      )}
+
+      {!hideTopBar && isDryRunCompleted && <DryRunCompleteBanner />}
+
+      <div className={cn(!hideTopBar && "flex-1 overflow-y-auto")}>
+        <div
+          className={cn("space-y-6", hideTopBar ? "mx-auto w-full max-w-7xl px-8" : "mx-auto max-w-[960px] px-16 py-8")}
+        >
+          {!hideTopBar && plan && !plan.hasCurrentFacts && (
+            <UnavailablePlanNotice hasExecutionHistory={plan.hasExecutionHistory} />
+          )}
+
+          {executionStatus === "failed" && (provenance?.planErrorMessage || triggerError) && (
+            <FailedBanner message={provenance?.planErrorMessage ?? triggerError ?? "Execution failed"} />
+          )}
+
+          {isLoading && !isPresent(effectiveEntityTypes) && (
+            <div className="flex items-center justify-center py-12">
+              <Loader className="size-6" />
+            </div>
+          )}
+
+          {plan && (
+            <SummaryBar
+              plan={plan}
+              executionStatus={executionStatus}
+              startedAtMs={planStartedAtMs}
+              endedAtMs={planEndedAtMs}
+            />
+          )}
+
+          {completedChanges ??
+            (isPresent(effectiveEntityTypes) && (
+              <ExecutionSections
+                entityTypes={effectiveEntityTypes}
+                provenance={provenance ?? null}
+                manualActions={manualActions}
+                manualActionEntities={manualActionEntities}
+                activeStartedAtMs={activeStartedAtMs}
+                onManualActionResolve={manualActionResolver.resolve}
+                resolvingManualAction={manualActionResolver.resolving}
+                canResolveManualAction={manualActionResolver.canResolve}
+                manualActionDisabledReason={manualActionResolver.disabledReason}
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/planning/ActivityLog.tsx

@@ -0,0 +1,35 @@
+import { Check, Loader2 } from "lucide-react";
+import type { ExecutionProgress } from "./plan-detail-utils";
+import { cn } from "#lib/utils";
+
+export function ActivityLog(props: { execution: ExecutionProgress }) {
+  const { execution } = props;
+
+  return (
+    <div className="rounded-xl border border-default-border bg-card overflow-hidden">
+      {execution.activities.map((activity) => (
+        <div
+          key={activity.id}
+          className={cn(
+            "flex items-center gap-3 border-b border-default-border px-4 py-2.5 last:border-b-0",
+            activity.status === "in_progress" && "bg-info",
+            activity.status === "pending" && "opacity-50",
+          )}
+        >
+          {activity.status === "completed" && <Check className="size-4 shrink-0 text-success-foreground" />}
+          {activity.status === "in_progress" && (
+            <Loader2 className="size-4 shrink-0 text-accent-foreground animate-spin" />
+          )}
+          {activity.status === "pending" && (
+            <div className="size-4 shrink-0 rounded-full border-2 border-muted-border" />
+          )}
+          <div className="flex-1 min-w-0">
+            <span className="typography-caption-medium text-default-foreground">{activity.entityName}</span>
+            <span className="ml-2 typography-small text-muted-foreground">{activity.typeName}</span>
+          </div>
+          <span className="typography-small text-muted-foreground uppercase">{activity.operation}</span>
+        </div>
+      ))}
+    </div>
+  );
+}