wave-code 0.17.1 → 0.17.2

package/src/components/TaskList.tsx

@@ -1,37 +1,226 @@
 import React from "react";
 import { useChat } from "../contexts/useChat.js";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { useTasks } from "../hooks/useTasks.js";
+import type { Task, TaskStatus } from "wave-agent-sdk";
+
+const RECENTLY_COMPLETED_TTL_MS = 30_000;
+const AUTO_HIDE_DELAY_MS = 5_000;
+
+export const getStatusIcon = (status: TaskStatus): React.ReactNode => {
+  switch (status) {
+    case "pending":
+      return <Text color="gray">□</Text>;
+    case "in_progress":
+      return <Text color="yellow">■</Text>;
+    case "completed":
+      return <Text color="green">✓</Text>;
+    case "deleted":
+      return <Text color="red">✕</Text>;
+    default:
+      return <Text color="gray">?</Text>;
+  }
+};
+
+function byIdAsc(a: Task, b: Task): number {
+  const aNum = parseInt(a.id, 10);
+  const bNum = parseInt(b.id, 10);
+  if (!isNaN(aNum) && !isNaN(bNum)) {
+    return aNum - bNum;
+  }
+  return a.id.localeCompare(b.id);
+}
+
+export function sortTasksByPriority(
+  tasks: Task[],
+  completionTimestamps: Map<string, number>,
+  now: number,
+  needsTruncation: boolean,
+): Task[] {
+  if (!needsTruncation) {
+    // No truncation needed — sort by ID for stable ordering
+    return [...tasks].sort(byIdAsc);
+  }
+
+  // When truncation is needed, prioritize:
+  // recently completed > in_progress > pending (unblocked first) > older completed > deleted
+  const recentCompleted: Task[] = [];
+  const olderCompleted: Task[] = [];
+  for (const task of tasks.filter((t) => t.status === "completed")) {
+    const ts = completionTimestamps.get(task.id);
+    if (ts && now - ts < RECENTLY_COMPLETED_TTL_MS) {
+      recentCompleted.push(task);
+    } else {
+      olderCompleted.push(task);
+    }
+  }
+  recentCompleted.sort(byIdAsc);
+  olderCompleted.sort(byIdAsc);
+
+  const inProgress = tasks
+    .filter((t) => t.status === "in_progress")
+    .sort(byIdAsc);
+
+  const unresolvedTaskIds = new Set(
+    tasks.filter((t) => t.status !== "completed").map((t) => t.id),
+  );
+  const pending = tasks
+    .filter((t) => t.status === "pending")
+    .sort((a, b) => {
+      const aBlocked = a.blockedBy.some((id) => unresolvedTaskIds.has(id));
+      const bBlocked = b.blockedBy.some((id) => unresolvedTaskIds.has(id));
+      if (aBlocked !== bBlocked) return aBlocked ? 1 : -1;
+      return byIdAsc(a, b);
+    });
+
+  const deleted = tasks.filter((t) => t.status === "deleted").sort(byIdAsc);
+
+  return [
+    ...recentCompleted,
+    ...inProgress,
+    ...pending,
+    ...olderCompleted,
+    ...deleted,
+  ];
+}
+
+function getDisplayLimit(rows: number | undefined): number {
+  const available = rows ?? 24;
+  return available <= 10 ? 0 : Math.min(10, Math.max(3, available - 14));
+}
 
 export const TaskList: React.FC = () => {
   const tasks = useTasks();
   const { isTaskListVisible } = useChat();
+  const { stdout } = useStdout();
 
-  if (tasks.length === 0 || !isTaskListVisible) {
-    return null;
+  const completionTimestampsRef = React.useRef<Map<string, number>>(new Map());
+  const previousCompletedIdsRef = React.useRef<Set<string> | null>(null);
+  const autoHideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const [autoHidden, setAutoHidden] = React.useState(() => {
+    // If all tasks are already completed on mount (e.g. session restore),
+    // start hidden immediately instead of flashing for 5 seconds.
+    const active = tasks.filter((t) => t.status !== "deleted");
+    return active.length > 0 && active.every((t) => t.status === "completed");
+  });
+  const [, forceUpdate] = React.useState(0);
+
+  const now = Date.now();
+  const activeTasks = tasks.filter((t) => t.status !== "deleted");
+
+  // Track completion timestamps: only set when a task newly transitions to completed
+  if (previousCompletedIdsRef.current === null) {
+    previousCompletedIdsRef.current = new Set(
+      tasks.filter((t) => t.status === "completed").map((t) => t.id),
+    );
+  }
+  const currentCompletedIds = new Set(
+    tasks.filter((t) => t.status === "completed").map((t) => t.id),
+  );
+  for (const id of currentCompletedIds) {
+    if (!previousCompletedIdsRef.current.has(id)) {
+      completionTimestampsRef.current.set(id, now);
+    }
+  }
+  for (const id of completionTimestampsRef.current.keys()) {
+    if (!currentCompletedIds.has(id)) {
+      completionTimestampsRef.current.delete(id);
+    }
   }
+  previousCompletedIdsRef.current = currentCompletedIds;
+
+  // Schedule re-render when the next recent completion expires
+  React.useEffect(() => {
+    if (completionTimestampsRef.current.size === 0) return;
+    const currentNow = Date.now();
+    let earliestExpiry = Infinity;
+    for (const ts of completionTimestampsRef.current.values()) {
+      const expiry = ts + RECENTLY_COMPLETED_TTL_MS;
+      if (expiry > currentNow && expiry < earliestExpiry) {
+        earliestExpiry = expiry;
+      }
+    }
+    if (earliestExpiry === Infinity) return;
+    const timer = setTimeout(
+      () => forceUpdate((n) => n + 1),
+      earliestExpiry - currentNow,
+    );
+    return () => clearTimeout(timer);
+  }, [tasks]);
 
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "pending":
-        return <Text color="gray">□</Text>;
-      case "in_progress":
-        return <Text color="yellow">■</Text>;
-      case "completed":
-        return <Text color="green">✓</Text>;
-      case "deleted":
-        return <Text color="red">✕</Text>;
-      default:
-        return <Text color="gray">?</Text>;
+  // Auto-hide logic: when all active tasks are completed
+  const allCompleted =
+    activeTasks.length > 0 &&
+    activeTasks.every((t) => t.status === "completed");
+
+  React.useEffect(() => {
+    if (allCompleted && !autoHidden) {
+      autoHideTimerRef.current = setTimeout(() => {
+        setAutoHidden(true);
+      }, AUTO_HIDE_DELAY_MS);
+    }
+    if (!allCompleted && autoHidden) {
+      setAutoHidden(false);
     }
-  };
+    return () => {
+      if (autoHideTimerRef.current) {
+        clearTimeout(autoHideTimerRef.current);
+        autoHideTimerRef.current = null;
+      }
+    };
+  }, [allCompleted, autoHidden]);
+
+  if (tasks.length === 0 || !isTaskListVisible || autoHidden) {
+    return null;
+  }
+
+  const displayLimit = getDisplayLimit(stdout?.rows);
+  const needsTruncation = tasks.length > displayLimit;
+  const sorted = sortTasksByPriority(
+    tasks,
+    completionTimestampsRef.current,
+    now,
+    needsTruncation,
+  );
+  const displayed = displayLimit > 0 ? sorted.slice(0, displayLimit) : [];
+  const hidden = displayLimit > 0 ? sorted.slice(displayLimit) : sorted;
+
+  const doneCount = tasks.filter((t) => t.status === "completed").length;
+  const inProgressCount = tasks.filter(
+    (t) => t.status === "in_progress",
+  ).length;
+  const openCount = tasks.filter((t) => t.status === "pending").length;
+
+  // Summary parts for hidden tasks
+  const hiddenInProgress = hidden.filter(
+    (t) => t.status === "in_progress",
+  ).length;
+  const hiddenPending = hidden.filter((t) => t.status === "pending").length;
+  const hiddenCompleted = hidden.filter((t) => t.status === "completed").length;
+
+  const summaryParts: string[] = [];
+  if (hiddenInProgress > 0)
+    summaryParts.push(`${hiddenInProgress} in progress`);
+  if (hiddenPending > 0) summaryParts.push(`${hiddenPending} pending`);
+  if (hiddenCompleted > 0) summaryParts.push(`${hiddenCompleted} completed`);
 
   return (
     <Box flexDirection="column">
-      {tasks.map((task) => {
+      <Text dimColor>
+        {tasks.length} tasks ({doneCount} done, {inProgressCount} in progress,{" "}
+        {openCount} open)
+      </Text>
+      {displayed.map((task) => {
         const isDimmed =
           task.status === "completed" || task.status === "deleted";
-        const isBlocked = task.blockedBy && task.blockedBy.length > 0;
+        const unresolvedTaskIds = new Set(
+          tasks.filter((t) => t.status !== "completed").map((t) => t.id),
+        );
+        const isBlocked =
+          task.blockedBy &&
+          task.blockedBy.some((id) => unresolvedTaskIds.has(id));
         const blockingTaskIds = isBlocked
           ? task.blockedBy.map((id) => `#${id}`)
           : [];
@@ -46,10 +235,15 @@ export const TaskList: React.FC = () => {
         return (
           <Box key={task.id} gap={1}>
             {getStatusIcon(task.status)}
-            <Text dimColor={isDimmed}>{fullText}</Text>
+            <Text dimColor={isDimmed} wrap="truncate-end">
+              {fullText}
+            </Text>
           </Box>
         );
       })}
+      {displayLimit > 0 && hidden.length > 0 && (
+        <Text dimColor> … +{summaryParts.join(", ")}</Text>
+      )}
     </Box>
   );
 };

package/src/components/TaskNotificationMessage.tsx

@@ -10,6 +10,7 @@ const statusColor: Record<TaskNotificationBlock["status"], string> = {
   completed: "green",
   failed: "red",
   killed: "yellow",
+  aborted: "gray",
 };
 
 export const TaskNotificationMessage = ({

package/src/components/WorkflowManager.tsx

@@ -0,0 +1,320 @@
+import React, { useEffect, useReducer } from "react";
+import { Box, Text, useInput } from "ink";
+import { useChat } from "../contexts/useChat.js";
+import type { WorkflowRun } from "wave-agent-sdk";
+import {
+  workflowManagerReducer,
+  type WorkflowManagerState,
+} from "../reducers/workflowManagerReducer.js";
+
+export interface WorkflowManagerProps {
+  onCancel: () => void;
+}
+
+const statusColor = (
+  status: WorkflowRun["status"],
+): "green" | "blue" | "red" | "yellow" => {
+  switch (status) {
+    case "running":
+      return "green";
+    case "completed":
+      return "blue";
+    case "failed":
+    case "aborted":
+      return "red";
+    case "paused":
+      return "yellow";
+  }
+};
+
+const formatDuration = (ms: number): string => {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.round((ms % 60000) / 1000);
+  return `${minutes}m ${seconds}s`;
+};
+
+const formatTime = (timestamp: number): string => {
+  return new Date(timestamp).toLocaleTimeString();
+};
+
+const formatTokens = (tokens: number): string => {
+  if (tokens < 1000) return `${tokens}`;
+  return `${(tokens / 1000).toFixed(1)}k`;
+};
+
+export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
+  onCancel,
+}) => {
+  const { workflowRuns, stopWorkflowRun } = useChat();
+  const MAX_VISIBLE_ITEMS = 3;
+
+  const [state, dispatch] = useReducer(workflowManagerReducer, {
+    runs: [],
+    selectedIndex: 0,
+    viewMode: "list",
+    detailRunId: null,
+    pendingEffect: null,
+  } as WorkflowManagerState);
+
+  // Handle pending effects
+  useEffect(() => {
+    if (!state.pendingEffect) return;
+
+    const effect = state.pendingEffect;
+    dispatch({ type: "CLEAR_PENDING_EFFECT" });
+
+    switch (effect.type) {
+      case "CANCEL":
+        onCancel();
+        break;
+      case "STOP_RUN":
+        stopWorkflowRun(effect.runId);
+        break;
+    }
+  }, [state.pendingEffect, onCancel, stopWorkflowRun]);
+
+  const { runs, selectedIndex, viewMode, detailRunId } = state;
+
+  // Sync workflowRuns from context
+  useEffect(() => {
+    dispatch({ type: "SET_RUNS", runs: workflowRuns });
+  }, [workflowRuns]);
+
+  useInput((input, key) => {
+    dispatch({ type: "HANDLE_KEY", input, key });
+  });
+
+  // Detail view
+  if (viewMode === "detail" && detailRunId) {
+    const run = runs.find((r) => r.runId === detailRunId);
+    if (!run) {
+      dispatch({ type: "RESET_DETAIL" });
+      return null;
+    }
+
+    const elapsed = run.endTime
+      ? run.endTime - run.startTime
+      : Date.now() - run.startTime;
+
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+        gap={1}
+      >
+        <Box>
+          <Text color="cyan" bold>
+            Workflow Details: {run.meta.name}
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" gap={0}>
+          <Box>
+            <Text>
+              <Text color="blue">Run ID:</Text> {run.runId}
+            </Text>
+          </Box>
+          {run.meta.description && (
+            <Box>
+              <Text>
+                <Text color="blue">Description:</Text> {run.meta.description}
+              </Text>
+            </Box>
+          )}
+          <Box>
+            <Text>
+              <Text color="blue">Status:</Text>{" "}
+              <Text color={statusColor(run.status)}>{run.status}</Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text color="blue">Started:</Text> {formatTime(run.startTime)}
+              {run.endTime && (
+                <Text>
+                  {" "}
+                  | <Text color="blue">Ended:</Text> {formatTime(run.endTime)}
+                </Text>
+              )}
+              {" | "}
+              <Text color="blue">Duration:</Text> {formatDuration(elapsed)}
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text color="blue">Agents:</Text> {run.totalAgents} {" | "}
+              <Text color="blue">Tokens:</Text> {formatTokens(run.totalTokens)}
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text color="blue">Script:</Text> {run.scriptPath}
+            </Text>
+          </Box>
+          {run.error && (
+            <Box>
+              <Text color="red">
+                <Text color="blue">Error:</Text> {run.error}
+              </Text>
+            </Box>
+          )}
+        </Box>
+
+        {run.phases.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <Text color="cyan" bold>
+              Phases:
+            </Text>
+            {run.phases.map((phase, i) => (
+              <Box key={i} marginLeft={2}>
+                <Text>
+                  <Text color="blue">{phase.title}</Text>
+                  {" — "}
+                  {phase.agentCount} agents | {formatTokens(phase.tokens)}{" "}
+                  tokens | {formatDuration(phase.elapsed)}
+                </Text>
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        <Box marginTop={1}>
+          <Text dimColor>
+            {run.status === "running" ? "k to stop · " : ""}Esc back
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Empty state
+  if (runs.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+      >
+        <Text color="cyan" bold>
+          Workflows
+        </Text>
+        <Text>No workflow runs found</Text>
+        <Text dimColor>Press Escape to close</Text>
+      </Box>
+    );
+  }
+
+  // List view
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_ITEMS / 2),
+      Math.max(0, runs.length - MAX_VISIBLE_ITEMS),
+    ),
+  );
+  const visibleRuns = runs.slice(startIndex, startIndex + MAX_VISIBLE_ITEMS);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+      gap={1}
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Workflows
+        </Text>
+      </Box>
+      <Text dimColor>Select a run to view details</Text>
+
+      <Box flexDirection="column">
+        {visibleRuns.map((run, index) => {
+          const actualIndex = startIndex + index;
+          const isSelected = actualIndex === selectedIndex;
+          const elapsed = run.endTime
+            ? run.endTime - run.startTime
+            : Date.now() - run.startTime;
+          const phaseText = run.phases.map((p) => p.title).join(" → ");
+
+          return (
+            <Box key={run.runId} flexDirection="column">
+              <Text
+                color={isSelected ? "black" : "white"}
+                backgroundColor={isSelected ? "cyan" : undefined}
+              >
+                {isSelected ? "▶ " : "  "}
+                {actualIndex + 1}. {run.runId.slice(0, 8)} {run.meta.name}
+                <Text color={statusColor(run.status)}> ({run.status})</Text>
+              </Text>
+              <Text
+                color={isSelected ? "black" : "gray"}
+                backgroundColor={isSelected ? "cyan" : undefined}
+              >
+                {"     "}
+                {run.totalAgents} agents · {formatTokens(run.totalTokens)}{" "}
+                tokens · {formatDuration(elapsed)}
+              </Text>
+              {phaseText && (
+                <Text
+                  color={isSelected ? "black" : "gray"}
+                  backgroundColor={isSelected ? "cyan" : undefined}
+                >
+                  {"     "}
+                  {run.phases.map((p, pi) => (
+                    <React.Fragment key={pi}>
+                      {pi > 0 && " → "}
+                      <Text
+                        color={
+                          isSelected
+                            ? "black"
+                            : pi === run.phases.length - 1 &&
+                                run.status === "running"
+                              ? "green"
+                              : undefined
+                        }
+                        backgroundColor={isSelected ? "cyan" : undefined}
+                      >
+                        {p.title}
+                      </Text>
+                    </React.Fragment>
+                  ))}
+                </Text>
+              )}
+              {isSelected && (
+                <Box marginLeft={4} flexDirection="column">
+                  <Text color="gray" dimColor>
+                    <Text color="blue">Script:</Text> {run.scriptPath}
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          ↑/↓ select · Enter detail ·{" "}
+          {runs[selectedIndex]?.status === "running" ? "k stop · " : ""}Esc
+          close
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/constants/commands.ts

@@ -62,4 +62,10 @@ export const AVAILABLE_COMMANDS: SlashCommand[] = [
     description: "Clear SSO authentication",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
+  {
+    id: "workflows",
+    name: "workflows",
+    description: "View and manage workflow runs",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
 ];