wave-code 1.2.0 → 1.4.0

package/src/components/WorkflowManager.tsx

@@ -1,49 +1,20 @@
 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";
+import WorkflowRunDetail, {
+  formatDuration,
+  formatTokens,
+  workflowStatusColor,
+} from "./WorkflowRunDetail.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,
 }) => {
@@ -94,10 +65,6 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
       return null;
     }
 
-    const elapsed = run.endTime
-      ? run.endTime - run.startTime
-      : Date.now() - run.startTime;
-
     return (
       <Box
         flexDirection="column"
@@ -115,75 +82,7 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
           </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>
-        )}
+        <WorkflowRunDetail run={run} />
 
         <Box marginTop={1}>
           <Text dimColor>
@@ -225,6 +124,17 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
   );
   const visibleRuns = runs.slice(startIndex, startIndex + MAX_VISIBLE_ITEMS);
 
+  // Header counts of the states a user acts on (a failed run is plain to see in
+  // its own row, so it needs no tally).
+  const runningCount = runs.filter((r) => r.status === "running").length;
+  const completedCount = runs.filter((r) => r.status === "completed").length;
+  const subtitle = [
+    runningCount > 0 ? `${runningCount} running` : "",
+    completedCount > 0 ? `${completedCount} completed` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
   return (
     <Box
       flexDirection="column"
@@ -240,6 +150,7 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
         <Text color="cyan" bold>
           Workflows
         </Text>
+        {subtitle && <Text dimColor> {subtitle}</Text>}
       </Box>
       <Text dimColor>Select a run to view details</Text>
 
@@ -250,7 +161,15 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
           const elapsed = run.endTime
             ? run.endTime - run.startTime
             : Date.now() - run.startTime;
-          const phaseText = run.phases.map((p) => p.title).join(" → ");
+          // Duration always reads; the two counters are dropped at zero so an
+          // unstarted run does not claim "0 agents · 0 tokens".
+          const meta = [
+            formatDuration(elapsed),
+            run.totalAgents > 0 ? `${run.totalAgents} agents` : "",
+            run.totalTokens > 0
+              ? `${formatTokens(run.totalTokens)} tokens`
+              : "",
+          ].filter(Boolean);
 
           return (
             <Box key={run.runId} flexDirection="column">
@@ -259,43 +178,24 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
                 backgroundColor={isSelected ? "cyan" : undefined}
               >
                 {isSelected ? "▶ " : "  "}
-                {actualIndex + 1}. {run.runId.slice(0, 8)} {run.meta.name}
-                <Text color={statusColor(run.status)}> ({run.status})</Text>
+                {actualIndex + 1}. {run.meta.name || run.meta.description}
+                <Text color={workflowStatusColor(run.status)}>
+                  {" "}
+                  ({run.status})
+                </Text>
+                {/* Oversized marker: the row is where a run is picked, so the
+                    "too big to leave running" signal belongs on it (spec
+                    「预算与规模硬上限」场景 7). The counts are on the meta line
+                    right below, and the stop key is in the footer. */}
+                {run.sizeWarning && <Text color="yellow"> ⚠ Large</Text>}
               </Text>
               <Text
                 color={isSelected ? "black" : "gray"}
                 backgroundColor={isSelected ? "cyan" : undefined}
               >
                 {"     "}
-                {run.totalAgents} agents · {formatTokens(run.totalTokens)}{" "}
-                tokens · {formatDuration(elapsed)}
+                {meta.join(" · ")}
               </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>

package/src/components/WorkflowRunDetail.tsx

@@ -0,0 +1,193 @@
+/**
+ * WorkflowRunDetail - one workflow run's own fields, rendered for the terminal.
+ *
+ * Shared by the two CLI panels that inspect a run: the `/workflows` detail view,
+ * and the `/tasks` detail view when the selected task is a workflow (a workflow
+ * background task's id IS its run id, so the two panels join on it). Both render
+ * this component, so they cannot disagree about what a run's progress looks like.
+ *
+ * The information set matches what the webview renders through
+ * `WorkflowRunProgress` — same fields, same order, same zero-value rules — but
+ * the carrier differs: Ink text lines instead of a DOM block, and the log lines
+ * are capped because an Ink panel does not scroll. That split is the spec's
+ * cross-renderer rule (docs/specs/multi-agent/workflow.md 边界情况).
+ */
+
+import React from "react";
+import { Box, Text } from "ink";
+import { getLastLines } from "wave-agent-sdk";
+import type { WorkflowRun } from "wave-agent-sdk";
+import {
+  WORKFLOW_SIZE_WARNING_AGENTS,
+  WORKFLOW_SIZE_WARNING_TOKENS,
+} from "wave-agent-sdk/constants";
+
+export 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`;
+};
+
+export const formatTime = (timestamp: number): string => {
+  return new Date(timestamp).toLocaleTimeString();
+};
+
+export const formatTokens = (tokens: number): string => {
+  if (tokens < 1000) return `${tokens}`;
+  // Millions matter here: a run crosses the 1.5M size threshold already showing
+  // "1500.0k", and the marker line names that threshold.
+  if (tokens < 1_000_000) return `${(tokens / 1000).toFixed(1)}k`;
+  return `${(tokens / 1_000_000).toFixed(1)}M`;
+};
+
+export const workflowStatusColor = (
+  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";
+  }
+};
+
+/**
+ * Log lines rendered. Same convention as this panel's OUTPUT block ("last 10
+ * lines"): a TUI panel cannot scroll, and a workflow that logs inside a loop can
+ * hold hundreds of retained lines.
+ */
+export const MAX_RUN_LOG_LINES = 10;
+
+const WorkflowRunDetail: React.FC<{ run: WorkflowRun }> = ({ run }) => {
+  const elapsed = run.endTime
+    ? run.endTime - run.startTime
+    : Date.now() - run.startTime;
+  const logs = run.logs ?? [];
+  const failures = run.failures ?? [];
+
+  return (
+    <>
+      <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={workflowStatusColor(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>
+        {/* Oversized marker (spec「预算与规模硬上限」场景 7): the run is bigger
+            than the thresholds, which is the human's cue to stop it — the model
+            is never told, so this line has to carry the scale and the
+            thresholds itself. Stopping stays with this panel's own affordance
+            (the footer's `k`), so the line only names it when the run is still
+            running and there is something to stop. */}
+        {run.sizeWarning && (
+          <Box>
+            <Text color="yellow">
+              ⚠ Large run: {run.totalAgents} agents /{" "}
+              {formatTokens(run.totalTokens)} tokens — over the{" "}
+              {WORKFLOW_SIZE_WARNING_AGENTS} agents /{" "}
+              {formatTokens(WORKFLOW_SIZE_WARNING_TOKENS)} tokens threshold.
+              {run.status === "running" && " Press k to stop it."}
+            </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>
+
+      {failures.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="red" bold>
+            Failures:
+          </Text>
+          {failures.map((failure, i) => (
+            <Box key={i} marginLeft={2}>
+              <Text color="red">{failure}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Only render a section that has content: an empty "Phases:" / "Logs:"
+          block reads as missing data rather than "nothing happened yet". */}
+      {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>
+      )}
+
+      {logs.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          <Text color="cyan" bold>
+            Logs (last {MAX_RUN_LOG_LINES} lines):
+          </Text>
+          <Box marginLeft={2}>
+            <Text>{getLastLines(logs.join("\n"), MAX_RUN_LOG_LINES)}</Text>
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default WorkflowRunDetail;

package/src/constants/commands.ts

@@ -56,6 +56,12 @@ export const AVAILABLE_COMMANDS: SlashCommand[] = [
     description: "View and manage plugins",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
+  {
+    id: "reload-plugins",
+    name: "reload-plugins",
+    description: "Reload plugins in place, without restarting the session",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
   {
     id: "btw",
     name: "btw",
@@ -92,6 +98,24 @@ export const AVAILABLE_COMMANDS: SlashCommand[] = [
     description: "Enable plan mode or view the current session plan",
     handler: () => {}, // Handler here won't be used, actual processing is in the hook
   },
+  {
+    id: "resume",
+    name: "resume",
+    description: "Switch to another conversation without leaving the session",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "rename",
+    name: "rename",
+    description: "Set a custom title for the current conversation",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
+  {
+    id: "remote-control",
+    name: "remote-control",
+    description: "Serve this terminal's session to a phone",
+    handler: () => {}, // Handler here won't be used, actual processing is in the hook
+  },
   {
     id: "clear",
     name: "clear",