@canonical/summon 0.1.0

package/src/components/ExecutionProgress.tsx

@@ -0,0 +1,205 @@
+/**
+ * ExecutionProgress Component
+ *
+ * Displays the progress of task execution with effect-by-effect feedback.
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { describeEffect } from "../effect.js";
+import { runTask, type StampConfig } from "../interpreter.js";
+import type { Effect, Task, TaskError } from "../types.js";
+import { Spinner } from "./Spinner.js";
+
+/** Effect with timing information for the completion timeline */
+export interface TimedEffect {
+  effect: Effect;
+  /** Time in ms when this effect completed, relative to execution start */
+  timestamp: number;
+}
+
+export interface ExecutionProgressProps {
+  /** The task to execute */
+  task: Task<void>;
+  /** Whether to run in dry-run mode */
+  dryRun?: boolean;
+  /** Called when execution completes */
+  onComplete: (effects: TimedEffect[], duration: number) => void;
+  /** Called when execution fails */
+  onError: (error: TaskError) => void;
+  /** Stamp configuration for generated files (undefined = no stamps) */
+  stamp?: StampConfig;
+}
+
+interface CompletedEffect {
+  id: number;
+  effect: Effect;
+  duration: number;
+  timestamp: number;
+}
+
+interface LogMessage {
+  id: number;
+  level: "debug" | "info" | "warn" | "error";
+  message: string;
+}
+
+/** Effects that should be hidden from the progress display (internal/noisy) */
+const isInternalEffect = (effect: Effect): boolean => {
+  // Hide internal coordination effects
+  if (
+    effect._tag === "Log" ||
+    effect._tag === "Exists" ||
+    effect._tag === "ReadContext" ||
+    effect._tag === "WriteContext" ||
+    effect._tag === "Parallel" ||
+    effect._tag === "Race"
+  ) {
+    return true;
+  }
+  // Hide template file reads (internal implementation detail)
+  if (effect._tag === "ReadFile" && effect.path.includes("/templates/")) {
+    return true;
+  }
+  return false;
+};
+
+export const ExecutionProgress: React.FC<ExecutionProgressProps> = ({
+  task,
+  dryRun: _dryRun = false,
+  onComplete,
+  onError,
+  stamp,
+}) => {
+  const [currentEffect, setCurrentEffect] = useState<Effect | null>(null);
+  const [completedEffects, setCompletedEffects] = useState<CompletedEffect[]>(
+    [],
+  );
+  const [logMessages, setLogMessages] = useState<LogMessage[]>([]);
+  const [isRunning, setIsRunning] = useState(true);
+
+  useEffect(() => {
+    const collectedEffects: TimedEffect[] = [];
+    const startTime = performance.now();
+    let effectId = 0;
+    let logId = 0;
+    // Track seen directory paths to deduplicate MakeDir effects in live progress
+    const seenDirPaths = new Set<string>();
+
+    const executeWithProgress = async () => {
+      try {
+        await runTask(task, {
+          stamp,
+          onEffectStart: (effect) => {
+            // Skip showing duplicate MakeDir in spinner
+            if (effect._tag === "MakeDir" && seenDirPaths.has(effect.path)) {
+              return;
+            }
+            setCurrentEffect(effect);
+          },
+          onEffectComplete: (effect, duration) => {
+            const id = effectId++;
+            const timestamp = performance.now() - startTime;
+            collectedEffects.push({ effect, timestamp });
+            // Skip duplicate MakeDir effects in live display
+            if (effect._tag === "MakeDir") {
+              if (seenDirPaths.has(effect.path)) {
+                setCurrentEffect(null);
+                return;
+              }
+              seenDirPaths.add(effect.path);
+            }
+            setCompletedEffects((prev) => [
+              ...prev,
+              { id, effect, duration, timestamp },
+            ]);
+            setCurrentEffect(null);
+          },
+          onLog: (level, message) => {
+            const id = logId++;
+            setLogMessages((prev) => [...prev, { id, level, message }]);
+          },
+        });
+
+        const duration = performance.now() - startTime;
+        onComplete(collectedEffects, duration);
+      } catch (err) {
+        const taskError: TaskError =
+          err instanceof Error
+            ? {
+                code: "EXECUTION_ERROR",
+                message: err.message,
+                stack: err.stack,
+              }
+            : {
+                code: "UNKNOWN_ERROR",
+                message: String(err),
+              };
+        onError(taskError);
+      } finally {
+        setIsRunning(false);
+      }
+    };
+
+    executeWithProgress();
+  }, [task, onComplete, onError, stamp]);
+
+  const logColor = (level: LogMessage["level"]) => {
+    switch (level) {
+      case "debug":
+        return "gray";
+      case "info":
+        return "blue";
+      case "warn":
+        return "yellow";
+      case "error":
+        return "red";
+    }
+  };
+
+  const logIcon = (level: LogMessage["level"]) => {
+    switch (level) {
+      case "debug":
+        return "·";
+      case "info":
+        return "›";
+      case "warn":
+        return "⚠";
+      case "error":
+        return "✗";
+    }
+  };
+
+  return (
+    <Box flexDirection="column">
+      {/* Show log messages */}
+      {logMessages.map((log) => (
+        <Text key={`log-${log.id}`}>
+          <Text color={logColor(log.level)}>{logIcon(log.level)}</Text>{" "}
+          <Text>{log.message}</Text>
+        </Text>
+      ))}
+      {/* Show completed file effects (excluding internal/noisy effects) */}
+      {completedEffects
+        .filter((item) => !isInternalEffect(item.effect))
+        .map((item) => (
+          <Text key={`effect-${item.id}`}>
+            <Text color="green">✓</Text> {describeEffect(item.effect)}{" "}
+            <Text dimColor>({item.duration.toFixed(0)}ms)</Text>
+          </Text>
+        ))}
+      {currentEffect && !isInternalEffect(currentEffect) && (
+        <Box>
+          <Spinner color="blue" />
+          <Text> {describeEffect(currentEffect)}</Text>
+        </Box>
+      )}
+      {isRunning && !currentEffect && (
+        <Box>
+          <Spinner color="blue" label="Executing..." />
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/FileTreePreview.tsx

@@ -0,0 +1,97 @@
+/**
+ * FileTreePreview Component
+ *
+ * Displays a list of files that will be created/modified.
+ */
+
+import { Box, Text } from "ink";
+import type { Effect } from "../types.js";
+
+export interface FileTreePreviewProps {
+  /** Effects to display */
+  effects: Effect[];
+  /** Title for the preview */
+  title?: string;
+}
+
+const formatBytes = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const getEffectInfo = (
+  effect: Effect,
+): { path: string; action: string; size?: number } | null => {
+  switch (effect._tag) {
+    case "WriteFile":
+      return {
+        path: effect.path,
+        action: "create",
+        size: effect.content.length,
+      };
+    case "MakeDir":
+      return { path: effect.path, action: "mkdir" };
+    case "CopyFile":
+      return { path: effect.dest, action: "copy" };
+    case "DeleteFile":
+      return { path: effect.path, action: "delete" };
+    case "DeleteDirectory":
+      return { path: effect.path, action: "rmdir" };
+    default:
+      return null;
+  }
+};
+
+export const FileTreePreview = ({
+  effects,
+  title = "Files to be created:",
+}: FileTreePreviewProps) => {
+  // Deduplicate effects by path (keep first occurrence, which preserves WriteFile over MakeDir)
+  const seen = new Set<string>();
+  const fileEffects = effects
+    .map(getEffectInfo)
+    .filter((info): info is NonNullable<typeof info> => {
+      if (info === null) return false;
+      if (seen.has(info.path)) return false;
+      seen.add(info.path);
+      return true;
+    })
+    .sort((a, b) => a.path.localeCompare(b.path));
+
+  if (fileEffects.length === 0) {
+    return (
+      <Box>
+        <Text dimColor>No files will be created.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color="cyan">
+        {title}
+      </Text>
+      <Box marginLeft={1} flexDirection="column">
+        {fileEffects.map((info, i) => {
+          const actionColor =
+            info.action === "delete" || info.action === "rmdir"
+              ? "red"
+              : "green";
+          const actionIcon =
+            info.action === "delete" || info.action === "rmdir" ? "-" : "+";
+
+          return (
+            <Box key={`${info.path}-${i}`}>
+              <Text color={actionColor}>{actionIcon} </Text>
+              <Text>{info.path}</Text>
+              {info.size !== undefined && (
+                <Text dimColor> ({formatBytes(info.size)})</Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};