wave-code 1.4.0 → 1.5.0

package/src/components/LoginCommand.tsx

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, usePaste } from "ink";
 import { execFile } from "child_process";
 import { promisify } from "util";
 import { authService } from "wave-agent-sdk";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 const execFileAsync = promisify(execFile);
 
@@ -33,12 +32,6 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
   const isLoadingRef = useRef(isLoading);
   isLoadingRef.current = isLoading;
 
-  // Detects and strips bracketed paste markers (\x1b[200~ ... \x1b[201~)
-  // that terminals wrap pasted text in. Unlike the main InputBox pipeline,
-  // this overlay's token input goes through raw ink useInput, which only
-  // strips ONE leading ESC, leaving the markers (e.g. "[200~") in the input.
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
   // Resolve/reject refs for the token promise
   const tokenResolveRef = useRef<((token: string) => void) | null>(null);
   const tokenRejectRef = useRef<((err: Error) => void) | null>(null);
@@ -78,34 +71,23 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
       setTokenInput((prev) => prev.slice(0, -1));
       return;
     }
-    // Regular character input (single or pasted multi-char). Run through the
-    // bracketed paste detector: a pasted token arrives wrapped in
-    // \x1b[200~ ... \x1b[201~ markers (possibly split across chunks), which
-    // must be stripped instead of being appended to the token.
+    // Regular character input (single keypress). A pasted token arrives on
+    // ink's paste channel instead (see usePaste below).
     if (input && !key.ctrl && !key.meta && !key.return && input.length > 0) {
-      const result = pasteDetectorRef.current.process(input);
-
-      if (result.kind === "consume") {
-        // In-flight bracketed paste content: hold it; the final chunk
-        // delivers the complete text.
-        return;
-      }
-
-      if (result.kind === "paste") {
-        // Tokens never contain carriage returns — drop \r (CRLF terminals
-        // send \r, not \n, in pasted text).
-        const leading = result.leadingInput?.replace(/\r/g, "");
-        if (leading) {
-          setTokenInput((prev) => prev + leading);
-        }
-        const text = result.text.replace(/\r/g, "");
-        if (text) {
-          setTokenInput((prev) => prev + text);
-        }
-        return;
-      }
+      setTokenInput((prev) => prev + input);
+    }
+  });
 
-      setTokenInput((prev) => prev + result.input);
+  // A pasted token arrives as one string here, so its content is appended
+  // verbatim instead of being read as keystrokes. Tokens never contain carriage
+  // returns — CRLF terminals send \r inside pasted text.
+  usePaste((text) => {
+    if (!isLoadingRef.current) {
+      return;
+    }
+    const token = text.replace(/\r/g, "");
+    if (token) {
+      setTokenInput((prev) => prev + token);
     }
   });
 
@@ -125,7 +107,6 @@ export const LoginCommand: React.FC<LoginCommandProps> = ({ onCancel }) => {
     setError("");
     setAuthUrl("");
     setTokenInput("");
-    pasteDetectorRef.current.reset();
     setMessage("Starting authentication...");
 
     // Promise that resolves when user presses Enter with token input

package/src/components/Markdown.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text } from "ink";
 import { Renderer, marked, type Tokens } from "marked";
 import chalk from "chalk";
 import { highlightToAnsi } from "../utils/highlightUtils.js";
@@ -155,8 +155,12 @@ export const renderMarkdownToAnsi = (
 
 // Markdown component using custom ANSI renderer
 export const Markdown = React.memo(({ children }: MarkdownProps) => {
-  const { stdout } = useStdout();
-  const columns = stdout?.columns ?? 80;
+  // Read the width without subscribing: one <Markdown> is mounted per text
+  // block (including frozen <Static> ones), and ink's `useWindowSize()` adds a
+  // `resize` listener per instance — enough of them trips Node's
+  // MaxListenersExceededWarning on stdout. Table widths only need to be right
+  // for the frame being rendered, exactly as with ink 7's `stdout.columns`.
+  const columns = process.stdout.columns || 80;
   const ansiContent = useMemo(
     () => renderMarkdownToAnsi(children, columns),
     [children, columns],

package/src/components/MarketplaceAddForm.tsx

@@ -1,12 +1,12 @@
-import React, { useReducer, useEffect, useRef } from "react";
-import { Box, Text, useInput } from "ink";
+import React, { useReducer, useEffect } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import type { Key } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 import {
   marketplaceAddFormReducer,
   SCOPES,
   type MarketplaceAddFormState,
 } from "../reducers/marketplaceAddFormReducer.js";
-import { createBracketedPasteDetector } from "../utils/bracketedPaste.js";
 
 export const MarketplaceAddForm: React.FC = () => {
   const { state: ctxState, actions } = usePluginManagerContext();
@@ -33,27 +33,23 @@ export const MarketplaceAddForm: React.FC = () => {
     dispatch({ type: "CLEAR_PENDING_ACTION" });
   }, [state.pendingAction, actions]);
 
-  const pasteDetectorRef = useRef(createBracketedPasteDetector());
-
-  useInput((input, key) => {
-    const result = pasteDetectorRef.current.process(input);
-    if (result.kind === "consume") {
-      // Content of an in-flight bracketed paste: hold it, never submit.
-      return;
-    }
-    let cleanInput: string;
-    if (result.kind === "paste") {
-      cleanInput = (result.leadingInput ?? "") + result.text;
-    } else {
-      cleanInput = result.input;
-    }
-
+  const dispatchKey = (input: string, key: Key) => {
     dispatch({
       type: "HANDLE_KEY",
       key,
-      input: cleanInput,
+      input,
       isLoading: ctxState.isLoading,
     });
+  };
+
+  useInput((input, key) => {
+    dispatchKey(input, key);
+  });
+
+  // A pasted source arrives here as one string with no key flags, so it fills
+  // the field without stepping the form or submitting it.
+  usePaste((text) => {
+    dispatchKey(text, {} as Key);
   });
 
   const { source, scopeIndex, step } = state;

package/src/components/RemoteControlView.tsx

@@ -0,0 +1,175 @@
+/**
+ * RemoteControlView — `/remote-control` 的覆盖层（把这条前台会话交给手机）。
+ *
+ * 规格：docs/specs/ui/remote-control.md「前台 CLI 会话也能被手机接管」。
+ *
+ * **这个斜杠命令不带参数**：没有 `on` / `off` / `status` 子命令，也不收机器名。
+ * 判据是「状态自己决定动作」——`off` / `error` 时唯一合法动作是开启，`connecting`
+ * / `online` 时唯一合法动作是断开，所以层里只呈现当前那一个动作，而不是把两个
+ * 动词写成命令参数让用户先自己算一遍状态。命名归脚本入口
+ * `wave remote-control on <name>`（且只在登记那一次生效）。
+ *
+ * 所有结果（四态、说明、地址、二维码、失败原因）都只回显在这一层里，**一律不进
+ * 消息列表**：这块内容要停在屏幕上够久以便掏手机扫码，而状态还会继续变，一条快照
+ * 消息既留不住也更新不了。与 GUI 设置页的「远程控制」选项卡同一口径。
+ *
+ * 状态怎么刷新：链路活在 CLI 进程里，没有推送通道，`useRemoteControl` 自己每秒读
+ * 一次快照（`status` 每次都是新对象），本视图读它即随渲染刷新，不另开轮询。
+ */
+
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { toString as qrToString } from "qrcode";
+import type { RemoteControlStatus } from "wave-agent-sdk";
+import { useChat } from "../contexts/useChat.js";
+
+export interface RemoteControlViewProps {
+  onCancel: () => void;
+}
+
+const STATE_LABELS: Record<RemoteControlStatus["state"], string> = {
+  off: "Not serving",
+  connecting: "Connecting…",
+  online: "Serving",
+  error: "Failed",
+};
+
+/** Colour per state — literal union, so `<Text color>` takes it as-is. */
+function stateColor(state: RemoteControlStatus["state"]) {
+  if (state === "online") return "green";
+  if (state === "error") return "red";
+  if (state === "connecting") return "yellow";
+  return "gray";
+}
+
+export const RemoteControlView: React.FC<RemoteControlViewProps> = ({
+  onCancel,
+}) => {
+  const { remoteControl } = useChat();
+  const { enabled, status, getSnapshot, connect, disconnect } = remoteControl;
+
+  // `status` is the per-second tick that makes this view re-render while it is
+  // open; the page address lives only on the snapshot (it is not part of
+  // `status`), so both are read on every render.
+  const { pageUrl } = getSnapshot();
+
+  const [showQr, setShowQr] = useState(false);
+  const [qrText, setQrText] = useState("");
+
+  // Opening this panel *is* the intent to serve: dial when nothing is running.
+  // A link that is already connecting or online is left alone — re-dialling
+  // would tear down a working connection (same rule as the GUI tab, whose
+  // single button flips on `state === "off" || state === "error"`).
+  //
+  // The deps are the two callbacks, not the `remoteControl` object: that object
+  // is rebuilt on every render, so depending on it would re-run this effect
+  // after every state change — which is exactly what made `d` unusable (the
+  // disconnect set `off`, the effect saw `off` and dialled again).
+  useEffect(() => {
+    if (!enabled) return;
+    const current = getSnapshot().state;
+    if (current === "off" || current === "error") connect();
+  }, [enabled, connect, getSnapshot]);
+
+  // The QR is folded away by default: it is ~35 rows tall, and the panel also
+  // has to stay readable when all the user wants is the state.
+  useEffect(() => {
+    if (!showQr || !pageUrl) {
+      setQrText("");
+      return;
+    }
+    let cancelled = false;
+    qrToString(pageUrl, { type: "utf8", errorCorrectionLevel: "L" })
+      .then((text) => {
+        if (!cancelled) setQrText(text);
+      })
+      .catch(() => {
+        if (!cancelled) setQrText("");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [showQr, pageUrl]);
+
+  const serving = status.state === "connecting" || status.state === "online";
+
+  useInput((input, key) => {
+    if (key.escape || key.return) {
+      onCancel();
+      return;
+    }
+    if (input === " ") {
+      setShowQr((prev) => !prev);
+      return;
+    }
+    // One key, and its label is whichever action is legal right now — the layer
+    // never asks the user to work out which of two verbs applies.
+    if (input === "d") {
+      if (serving) disconnect();
+      else connect();
+    }
+  });
+
+  // The switch is read once per process, so a process started with it off can
+  // only be told what to change — it cannot pick the setting up by itself.
+  const note = enabled
+    ? status.message
+    : 'Remote control is unavailable in this process. Set "enableRemoteControl": true in ~/.wave/settings.json (or .wave/settings.json in the project), then restart the CLI — a process that is already running keeps the settings it started with.';
+
+  const row = (label: string, value: string, color?: string) => (
+    <Box>
+      <Box width={14}>
+        <Text color="yellow">{label}</Text>
+      </Box>
+      <Box flexShrink={1}>
+        <Text color={color} wrap="wrap">
+          {value}
+        </Text>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box marginBottom={1}>
+        <Text color="cyan" bold underline>
+          Remote Control
+        </Text>
+      </Box>
+
+      {row("Status:", STATE_LABELS[status.state], stateColor(status.state))}
+
+      {note ? row("Note:", note) : null}
+
+      {pageUrl ? row("Phone page:", pageUrl) : null}
+
+      {showQr && qrText ? (
+        <Box flexDirection="column" marginTop={1}>
+          {qrText
+            .split("\n")
+            .filter((line) => line.length > 0)
+            .map((line, index) => (
+              <Text key={index}>{line}</Text>
+            ))}
+        </Box>
+      ) : null}
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          {!enabled
+            ? "Esc close"
+            : serving
+              ? "space QR code · d disconnect · Esc close"
+              : "space QR code · d connect · Esc close"}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/ScrolledContent.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from "react";
-import { Box, type DOMElement } from "ink";
+import React, { useEffect, useRef } from "react";
+import { Box, useBoxMetrics, type DOMElement } from "ink";
 
 export interface ScrolledContentProps {
   /** Every content row — rows are never sliced, the viewport clips them. */
@@ -15,16 +15,16 @@ export interface ScrolledContentProps {
 
 /**
  * Hard-bounded, clipping viewport for content that can be wider than the
- * terminal: the content is rendered once and translated up by `scrollOffset`
- * rows, and rows outside the viewport are clipped away.
+ * terminal: the content is rendered once and shifted up by `scrollOffset` rows,
+ * and rows outside the viewport are clipped away.
  *
  * Height is bounded by construction — a line that wraps grows the content
  * instead of the frame — so the row budget of the surrounding layout holds no
  * matter how many rows the content really needs.
  *
- * The row count is read back from the layout rather than predicted from the
- * text: by the time this effect runs, Yoga has wrapped the content to the
- * terminal width, so the computed height already includes wrapped rows.
+ * The row count is read back from the layout (`useBoxMetrics`) rather than
+ * predicted from the text: by the time it reports, Yoga has wrapped the content
+ * to the terminal width, so the measured height already includes wrapped rows.
  */
 export const ScrolledContent: React.FC<ScrolledContentProps> = ({
   children,
@@ -33,24 +33,27 @@ export const ScrolledContent: React.FC<ScrolledContentProps> = ({
   onMeasuredRows,
 }) => {
   const contentRef = useRef<DOMElement | null>(null);
+  const { height, hasMeasured } = useBoxMetrics(contentRef);
   const reportedRows = useRef(0);
 
-  useLayoutEffect(() => {
-    const yogaNode = contentRef.current?.yogaNode;
-    if (!yogaNode) {
+  useEffect(() => {
+    if (!hasMeasured) {
       return;
     }
-    const rows = Math.round(yogaNode.getComputedHeight());
+    const rows = Math.round(height);
     if (rows > 0 && rows !== reportedRows.current) {
       reportedRows.current = rows;
       onMeasuredRows(rows);
     }
-  });
+  }, [height, hasMeasured, onMeasuredRows]);
 
   return (
     <Box
       maxHeight={visibleRows}
       overflow="hidden"
+      // Children are shifted up by this many rows; `overflow="hidden"` clips
+      // whatever the shift pushes out of the viewport.
+      contentOffsetY={scrollOffset}
       flexShrink={0}
       flexDirection="column"
     >
@@ -60,7 +63,6 @@ export const ScrolledContent: React.FC<ScrolledContentProps> = ({
         // Without this the fixed-height parent shrinks the content to fit and
         // renders garbled rows instead of clipping them.
         flexShrink={0}
-        marginTop={-scrollOffset}
       >
         {children}
       </Box>

package/src/components/SkillsManager.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useReducer } from "react";
-import { Box, Text, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useWindowSize } from "ink";
 import type { SkillMetadata } from "wave-agent-sdk";
 import {
   skillsManagerReducer,
@@ -55,7 +55,7 @@ export const SkillsManager: React.FC<SkillsManagerProps> = ({
   skills,
 }) => {
   const [state, dispatch] = useReducer(skillsManagerReducer, initialState);
-  const { stdout } = useStdout();
+  const { rows } = useWindowSize();
 
   // Handle pending effects
   useEffect(() => {
@@ -114,7 +114,7 @@ export const SkillsManager: React.FC<SkillsManagerProps> = ({
   // Window slice: center the selected item within the visible area, clamping
   // to the terminal's available rows (reusable pattern from
   // AgentsManager/BackgroundTaskManager).
-  const availableRows = stdout?.rows ?? 24;
+  const availableRows = rows || 24;
   const maxVisible = Math.max(3, Math.min(15, availableRows - 12));
   const selectedFlatIndex = entries.findIndex(
     (e) => e.selectableIndex === state.selectedIndex,

package/src/components/TaskList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useChat } from "../contexts/useChat.js";
-import { Box, Text, useStdout } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import { useTasks } from "../hooks/useTasks.js";
 import type { Task, TaskStatus } from "wave-agent-sdk";
 
@@ -92,7 +92,7 @@ function getDisplayLimit(rows: number | undefined): number {
 export const TaskList: React.FC = () => {
   const tasks = useTasks();
   const { isTaskListVisible, isBtwActive } = useChat();
-  const { stdout } = useStdout();
+  const { rows } = useWindowSize();
 
   const completionTimestampsRef = React.useRef<Map<string, number>>(new Map());
   const previousCompletedIdsRef = React.useRef<Set<string> | null>(null);
@@ -195,7 +195,7 @@ export const TaskList: React.FC = () => {
     return null;
   }
 
-  const displayLimit = getDisplayLimit(stdout?.rows);
+  const displayLimit = getDisplayLimit(rows);
   const needsTruncation = tasks.length > displayLimit;
   const sorted = sortTasksByPriority(
     tasks,

package/src/components/ToolDisplay.tsx

@@ -91,12 +91,7 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
 
       {/* Display shortResult in collapsed state */}
       {!isExpanded && shortResult && !error && (
-        <Box
-          paddingLeft={2}
-          borderLeft
-          borderColor="gray"
-          flexDirection="column"
-        >
+        <Box paddingLeft={2} flexDirection="column">
           {shortResult.split("\n").map((line, index) => (
             <Text key={index} color="gray" wrap="truncate-end">
               {line}
@@ -107,12 +102,7 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
 
       {/* Display complete parameters in expanded state */}
       {isExpanded && parameters && (
-        <Box
-          paddingLeft={2}
-          borderLeft
-          borderColor="gray"
-          flexDirection="column"
-        >
+        <Box paddingLeft={2} flexDirection="column">
           <Text color="cyan" bold>
             Parameters:
           </Text>
@@ -123,12 +113,7 @@ export const ToolDisplay: React.FC<ToolDisplayProps> = ({
       {/* Display complete result in expanded state */}
       {isExpanded && result && (
         <Box flexDirection="column">
-          <Box
-            paddingLeft={2}
-            borderLeft
-            borderColor="green"
-            flexDirection="column"
-          >
+          <Box paddingLeft={2} flexDirection="column">
             <Text color="cyan" bold>
               Result:
             </Text>

package/src/components/WorkflowManager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { useChat } from "../contexts/useChat.js";
 import {
@@ -15,10 +15,20 @@ export interface WorkflowManagerProps {
   onCancel: () => void;
 }
 
+/** Inline save dialog state, opened from a run's detail view (spec workflow「把
+ * 脚本存进库并按名字复用」场景 2). */
+interface SaveDialogState {
+  name: string;
+  scope: "project" | "user";
+  /** Set on a conflict so the next Enter overwrites instead of failing again. */
+  overwrite: boolean;
+  error?: string;
+}
+
 export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
   onCancel,
 }) => {
-  const { workflowRuns, stopWorkflowRun } = useChat();
+  const { workflowRuns, stopWorkflowRun, saveWorkflowScript } = useChat();
   const MAX_VISIBLE_ITEMS = 3;
 
   const [state, dispatch] = useReducer(workflowManagerReducer, {
@@ -28,6 +38,8 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
     detailRunId: null,
     pendingEffect: null,
   } as WorkflowManagerState);
+  const [saveDialog, setSaveDialog] = useState<SaveDialogState | null>(null);
+  const [saveNotice, setSaveNotice] = useState<string | null>(null);
 
   // Handle pending effects
   useEffect(() => {
@@ -53,7 +65,93 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
     dispatch({ type: "SET_RUNS", runs: workflowRuns });
   }, [workflowRuns]);
 
+  const submitSave = async () => {
+    if (!saveDialog || !state.detailRunId) return;
+    try {
+      const saved = await saveWorkflowScript(state.detailRunId, {
+        name: saveDialog.name,
+        scope: saveDialog.scope,
+        overwrite: saveDialog.overwrite,
+      });
+      setSaveDialog(null);
+      setSaveNotice(`Saved "${saved.name}" to ${saved.path}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setSaveDialog((current) =>
+        current
+          ? {
+              ...current,
+              error: message,
+              // A name conflict is the one failure the user can resolve right
+              // here: the next Enter overwrites (spec 场景 4).
+              overwrite: message.includes("already exists")
+                ? true
+                : current.overwrite,
+            }
+          : current,
+      );
+    }
+  };
+
   useInput((input, key) => {
+    // The save dialog owns the keyboard while it is open, so typing a name
+    // never triggers the list/detail shortcuts underneath.
+    if (saveDialog) {
+      if (key.escape) {
+        setSaveDialog(null);
+        return;
+      }
+      if (key.tab) {
+        setSaveDialog((current) =>
+          current
+            ? {
+                ...current,
+                scope: current.scope === "project" ? "user" : "project",
+                error: undefined,
+              }
+            : current,
+        );
+        return;
+      }
+      if (key.return) {
+        void submitSave();
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setSaveDialog((current) =>
+          current
+            ? {
+                ...current,
+                name: current.name.slice(0, -1),
+                error: undefined,
+              }
+            : current,
+        );
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        setSaveDialog((current) =>
+          current
+            ? { ...current, name: current.name + input, error: undefined }
+            : current,
+        );
+      }
+      return;
+    }
+
+    if (state.viewMode === "detail" && state.detailRunId && input === "s") {
+      const run = state.runs.find((r) => r.runId === state.detailRunId);
+      if (run) {
+        setSaveNotice(null);
+        setSaveDialog({
+          name: run.meta.name,
+          scope: "project",
+          overwrite: false,
+        });
+      }
+      return;
+    }
+
     dispatch({ type: "HANDLE_KEY", input, key });
   });
 
@@ -84,9 +182,25 @@ export const WorkflowManager: React.FC<WorkflowManagerProps> = ({
 
         <WorkflowRunDetail run={run} />
 
+        {saveDialog && (
+          <Box flexDirection="column">
+            <Text color="cyan">Save dynamic workflow</Text>
+            <Text>
+              Name: {saveDialog.name}
+              <Text color="cyan">▏</Text>
+            </Text>
+            <Text dimColor>Scope: {saveDialog.scope} · Tab to switch</Text>
+            {saveDialog.error && <Text color="red">{saveDialog.error}</Text>}
+          </Box>
+        )}
+
+        {saveNotice && <Text color="green">{saveNotice}</Text>}
+
         <Box marginTop={1}>
           <Text dimColor>
-            {run.status === "running" ? "k to stop · " : ""}Esc back
+            {saveDialog
+              ? "Enter save · Tab scope · Esc cancel"
+              : `${run.status === "running" ? "k to stop · " : ""}s save script · Esc back`}
           </Text>
         </Box>
       </Box>