wave-code 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -15,8 +15,7 @@
     "ink",
     "typescript"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/bundle/wave.mjs",
   "type": "module",
   "bin": {
     "wave-code": "bin/wave-code.js",
@@ -29,49 +28,49 @@
     "README.md"
   ],
   "dependencies": {
+    "@vscode/ripgrep": "^1.18.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/semver": "^7.7.1",
+    "@types/yargs": "^17.0.0",
+    "@vitest/coverage-v8": "^4.1.7",
     "chalk": "^5.6.2",
     "diff": "^8.0.2",
+    "esbuild": "^0.28.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^13.0.0",
     "highlight.js": "^11.11.1",
-    "ink": "^6.7.0",
+    "ink": "^7.1.1",
+    "ink-testing-library": "^4.0.0",
     "marked": "^17.0.2",
     "node-html-parser": "^7.0.2",
     "react": "^19.2.4",
     "react-dom": "19.2.4",
+    "rimraf": "^6.1.2",
     "semver": "^7.7.4",
     "string-width": "^8.2.2",
+    "tsx": "^4.20.4",
+    "vitest": "^4.1.7",
     "wrap-ansi": "^10.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "1.0.9"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.8",
-    "@types/semver": "^7.7.1",
-    "@types/yargs": "^17.0.0",
-    "@vitest/coverage-v8": "^4.1.7",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "ink-testing-library": "^4.0.0",
-    "rimraf": "^6.1.2",
-    "tsc-alias": "^1.8.16",
-    "tsx": "^4.20.4",
-    "vitest": "^4.1.7"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0"
+    "wave-agent-sdk": "1.1.0"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "license": "MIT",
   "scripts": {
-    "wave": "NODE_OPTIONS='--heapsnapshot-near-heap-limit=1' tsx --tsconfig tsconfig.dev.json src/index.ts",
-    "build": "rimraf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "wave": "tsx --tsconfig tsconfig.dev.json src/index.ts",
+    "build": "rimraf dist && node scripts/bundle.mjs",
     "type-check": "tsc --noEmit --incremental",
-    "watch": "tsc -p tsconfig.build.json --watch & tsc-alias -p tsconfig.build.json --watch",
     "test": "vitest run --reporter=dot",
     "test:coverage": "vitest run --coverage --reporter=dot",
+    "test:unit": "vitest run --reporter=dot --exclude 'tests/integration/**' --exclude '**/*.integration.test.ts'",
+    "test:unit:coverage": "vitest run --coverage --reporter=dot --exclude 'tests/integration/**' --exclude '**/*.integration.test.ts'",
+    "test:integration": "vitest run --reporter=dot tests/integration .integration.test",
     "lint": "eslint --cache",
     "format": "prettier --write ."
   }

package/src/commands/update.ts

@@ -1,15 +1,10 @@
 import { spawnSync } from "child_process";
-import { readFileSync } from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
 import https from "https";
 import chalk from "chalk";
 import { isUpdateAvailable } from "../utils/version.js";
+import { readNearestPackageJson } from "../utils/readPackageJson.js";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const packageJsonPath = path.resolve(__dirname, "../../package.json");
-const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-const currentVersion = packageJson.version;
+const currentVersion = readNearestPackageJson().version;
 
 async function getLatestVersion(): Promise<string> {
   return new Promise((resolve, reject) => {

package/src/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useInput } from "ink";
 import { ChatInterface } from "./ChatInterface.js";
-import { ChatProvider, useChat } from "../contexts/useChat.js";
+import { ChatProvider } from "../contexts/useChat.js";
 import { AppProvider } from "../contexts/useAppConfig.js";
 import { WorktreeExitPrompt } from "./WorktreeExitPrompt.js";
 import {
@@ -22,12 +22,11 @@ interface AppWithProvidersProps extends BaseAppProps {
   onExit: (shouldRemove: boolean) => void;
 }
 
-/** Wraps ChatInterface with worktree exit handling, using useChat() for hook access. */
+/** Wraps ChatInterface with worktree exit handling. */
 const ChatWithExitPrompt: React.FC<{
   worktreeSession: NonNullable<BaseAppProps["worktreeSession"]>;
   onExit: (shouldRemove: boolean) => void;
 }> = ({ worktreeSession, onExit }) => {
-  const { triggerWorktreeRemoveHook } = useChat();
   const [isExiting, setIsExiting] = useState(false);
   const [worktreeStatus, setWorktreeStatus] = useState<{
     hasUncommittedChanges: boolean;
@@ -80,10 +79,7 @@ const ChatWithExitPrompt: React.FC<{
         hasUncommittedChanges={worktreeStatus.hasUncommittedChanges}
         hasNewCommits={worktreeStatus.hasNewCommits}
         onKeep={() => onExit(false)}
-        onRemove={async () => {
-          await triggerWorktreeRemoveHook(worktreeSession.path);
-          onExit(true);
-        }}
+        onRemove={() => onExit(true)}
         onCancel={() => setIsExiting(false)}
       />
     );

package/src/components/BtwDisplay.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import { Markdown } from "./Markdown.js";
 import { BtwState } from "../managers/inputReducer.js";
+import { streamingTail } from "../utils/streamingText.js";
 
 interface BtwDisplayProps {
   btwState: BtwState;
@@ -36,7 +37,15 @@ export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState }) => {
       )}
       <Box marginTop={1} flexDirection="column">
         {btwState.isLoading ? (
-          <Text color="gray">✻ Answering...</Text>
+          <Box>
+            <Text color="gray">✻ Answering</Text>
+            {btwState.answer && (
+              <Text color="gray" wrap="truncate-end">
+                {" "}
+                {streamingTail(btwState.answer)}
+              </Text>
+            )}
+          </Box>
         ) : isError ? (
           <Text color="error">{answer}</Text>
         ) : (

package/src/components/ChatInterface.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { Box, useStdout, measureElement, Static } from "ink";
-import type { DOMElement } from "ink";
+import React, { useState, useEffect, useCallback } from "react";
+import { Box, useWindowSize } from "ink";
 import { authService } from "wave-agent-sdk";
 import { MessageList } from "./MessageList.js";
 import { InputBox } from "./InputBox.js";
@@ -18,6 +17,7 @@ export const ChatInterface: React.FC = () => {
     isLoading,
     isCommandRunning,
     isCompacting,
+    compactionStream,
     sendMessage,
     abortMessage,
     mcpServers,
@@ -30,23 +30,26 @@ export const ChatInterface: React.FC = () => {
     slashCommands,
     hasSlashCommand,
     isConfirmationVisible,
-    hasPendingConfirmations,
     confirmingTool,
     handleConfirmationDecision,
     handleConfirmationCancel,
     version,
     workdir,
     remountKey,
-    forceRemount,
     getGatewayConfig,
   } = useChat();
 
   const displayMessages = messages;
 
-  const [forceStatic, setForceStatic] = useState(false);
-  const { stdout } = useStdout();
-  const terminalHeight = stdout?.rows ?? 24;
-  const chatInterfaceRef = useRef<DOMElement>(null);
+  const { rows } = useWindowSize();
+
+  // Reserve terminal rows for the pending tool block in the message list and
+  // the ConfirmationSelector, so the confirmation details stay within Ink's
+  // incremental-rendering height. When dynamic output >= terminal rows, Ink
+  // falls back to a fullscreen clear + redraw on every frame, which makes the
+  // confirmation options flicker while navigating.
+  const CONFIRMATION_UI_RESERVE = 14;
+  const detailsMaxHeight = Math.max(rows - CONFIRMATION_UI_RESERVE, 1);
 
   // Compute whether the user has any usable auth/direct-API config,
   // so the welcome page can prompt /login when neither is present.
@@ -70,36 +73,16 @@ export const ChatInterface: React.FC = () => {
 
   const showLoginHint = !hasAuth;
 
-  // Handle forceStatic mode for overflow and request remount when exiting
-  useEffect(() => {
-    if (isConfirmationVisible && chatInterfaceRef.current) {
-      const { height } = measureElement(chatInterfaceRef.current);
-      if (height > terminalHeight) {
-        setForceStatic(true);
-      }
-    } else if (forceStatic && !hasPendingConfirmations) {
-      setForceStatic(false);
-      forceRemount();
-    }
-  }, [
-    isConfirmationVisible,
-    terminalHeight,
-    forceStatic,
-    hasPendingConfirmations,
-    forceRemount,
-  ]);
-
   if (!sessionId) return null;
 
   return (
-    <Box ref={chatInterfaceRef} flexDirection="column">
+    <Box flexDirection="column">
       <MessageList
         key={remountKey}
         messages={displayMessages}
         isExpanded={isExpanded}
         version={version}
         workdir={workdir}
-        forceStatic={forceStatic}
       />
 
       {!isConfirmationVisible && !isExpanded && (
@@ -110,6 +93,7 @@ export const ChatInterface: React.FC = () => {
               isCommandRunning={isCommandRunning}
               isCompacting={isCompacting}
               latestTotalTokens={latestTotalTokens}
+              compactionStream={compactionStream}
             />
           )}
           <TaskList />
@@ -134,28 +118,13 @@ export const ChatInterface: React.FC = () => {
 
       {isConfirmationVisible && (
         <>
-          {forceStatic ? (
-            <Static items={[{ key: "confirmation-details" }]}>
-              {() => (
-                <ConfirmationDetails
-                  key="confirmation-details"
-                  toolName={confirmingTool!.name}
-                  toolInput={confirmingTool!.input}
-                  planContent={confirmingTool!.planContent}
-                  warning={confirmingTool!.warning}
-                  isExpanded={isExpanded}
-                />
-              )}
-            </Static>
-          ) : (
-            <ConfirmationDetails
-              toolName={confirmingTool!.name}
-              toolInput={confirmingTool!.input}
-              planContent={confirmingTool!.planContent}
-              warning={confirmingTool!.warning}
-              isExpanded={isExpanded}
-            />
-          )}
+          <ConfirmationDetails
+            toolName={confirmingTool!.name}
+            toolInput={confirmingTool!.input}
+            planContent={confirmingTool!.planContent}
+            warning={confirmingTool!.warning}
+            maxHeight={detailsMaxHeight}
+          />
           <ConfirmationSelector
             toolName={confirmingTool!.name}
             toolInput={confirmingTool!.input}

package/src/components/ConfirmationDetails.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Text } from "ink";
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
 import {
   BASH_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -9,8 +9,7 @@ import {
   ASK_USER_QUESTION_TOOL_NAME,
   ARTIFACT_TOOL_NAME,
 } from "wave-agent-sdk";
-import { DiffDisplay } from "./DiffDisplay.js";
-import { PlanDisplay } from "./PlanDisplay.js";
+import { buildDiffLinesFromParams } from "./DiffDisplay.js";
 import { highlightToAnsi } from "../utils/highlightUtils.js";
 
 // Helper function to generate descriptive action text
@@ -42,12 +41,20 @@ const getActionDescription = (
   }
 };
 
+// Row budget for the scroll indicators (↑ more / ↓ more, up to one each).
+const SCROLL_INDICATOR_BUDGET = 2;
+// Row budget for the fixed scroll-key hint shown when content is scrollable.
+const SCROLL_HINT_BUDGET = 1;
+
 export interface ConfirmationDetailsProps {
   toolName: string;
   toolInput?: Record<string, unknown>;
   planContent?: string;
   warning?: string;
-  isExpanded?: boolean;
+  /** Available height (rows) for the whole details block, computed by
+   *  ChatInterface from the terminal size. Used to size the scrollable
+   *  content area so the dynamic output never exceeds terminal height. */
+  maxHeight?: number;
 }
 
 export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
@@ -55,56 +62,156 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
   toolInput,
   planContent,
   warning,
-  isExpanded = false,
+  maxHeight,
 }) => {
   const startLineNumber =
     (toolInput?.startLineNumber as number | undefined) ??
     (toolName === WRITE_TOOL_NAME ? 1 : undefined);
 
-  const content = (
+  const headerRows = 2 + (warning ? 1 : 0);
+
+  // Number of content rows rendered at once. The header stays fixed above the
+  // scrollable area; rows are budgeted for the scroll indicators and hint.
+  const visibleCount = Math.max(
+    1,
+    (maxHeight ?? 24) -
+      headerRows -
+      SCROLL_INDICATOR_BUDGET -
+      SCROLL_HINT_BUDGET,
+  );
+
+  // Content linearized into rows so the details area can be scrolled with
+  // PgUp/PgDn while the confirmation options stay fixed at the bottom.
+  const diffLines = buildDiffLinesFromParams({
+    toolName,
+    parameters: JSON.stringify(toolInput),
+    startLineNumber,
+  });
+
+  const showToolInput =
+    toolName !== WRITE_TOOL_NAME &&
+    toolName !== EDIT_TOOL_NAME &&
+    toolName !== EXIT_PLAN_MODE_TOOL_NAME &&
+    toolName !== ENTER_PLAN_MODE_TOOL_NAME &&
+    toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+    toolName !== BASH_TOOL_NAME &&
+    !!toolInput;
+
+  const jsonLines = showToolInput
+    ? highlightToAnsi(JSON.stringify(toolInput, null, 2), "json")
+        .split("\n")
+        .map((line, index) => (
+          <Box
+            key={`json-${index}`}
+            paddingLeft={2}
+            borderLeft
+            borderColor="cyan"
+          >
+            <Text>{line || " "}</Text>
+          </Box>
+        ))
+    : [];
+
+  const showPlan =
+    toolName !== ASK_USER_QUESTION_TOOL_NAME &&
+    toolName === EXIT_PLAN_MODE_TOOL_NAME &&
+    !!planContent;
+
+  const planLines = showPlan
+    ? planContent!.split("\n").map((line, index) => (
+        <Box key={`plan-${index}`}>
+          <Text>{line || " "}</Text>
+        </Box>
+      ))
+    : [];
+
+  const contentLines: React.ReactNode[] = [
+    ...diffLines,
+    ...jsonLines,
+    ...planLines,
+  ];
+  const totalLines = contentLines.length;
+  const maxScroll = Math.max(0, totalLines - visibleCount);
+
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Reset scrolling when a new confirmation appears.
+  useEffect(() => {
+    setScrollOffset(0);
+  }, [toolName, toolInput, planContent]);
+
+  const halfPage = Math.max(1, Math.ceil(visibleCount / 2));
+  useInput((input, key) => {
+    if (key.pageUp) {
+      setScrollOffset((offset) => Math.max(0, offset - visibleCount));
+    }
+    if (key.pageDown) {
+      setScrollOffset((offset) => Math.min(maxScroll, offset + visibleCount));
+    }
+    // Ctrl+u/Ctrl+d scroll half a page — fallback for keyboards without
+    // PgUp/PgDn (aligned with Claude Code's modal pager keys).
+    if (key.ctrl && input === "u") {
+      setScrollOffset((offset) => Math.max(0, offset - halfPage));
+    }
+    if (key.ctrl && input === "d") {
+      setScrollOffset((offset) => Math.min(maxScroll, offset + halfPage));
+    }
+  });
+
+  const clampedOffset = Math.min(scrollOffset, maxScroll);
+  const visibleLines = contentLines.slice(
+    clampedOffset,
+    clampedOffset + visibleCount,
+  );
+  const hasMoreAbove = clampedOffset > 0;
+  const hasMoreBelow = clampedOffset + visibleCount < totalLines;
+
+  return (
     <Box
       flexDirection="column"
+      flexShrink={0}
       borderStyle="single"
       borderColor="yellow"
       borderBottom={false}
       borderLeft={false}
       borderRight={false}
     >
-      <Text color="yellow" bold>
+      <Text color="yellow" bold wrap="truncate-end">
         Tool: {toolName}
       </Text>
-      <Text color="yellow">{getActionDescription(toolName, toolInput)}</Text>
-      {warning && <Text color="red">⚠ {warning}</Text>}
-
-      <DiffDisplay
-        toolName={toolName}
-        parameters={JSON.stringify(toolInput)}
-        startLineNumber={startLineNumber}
-      />
-
-      {toolName !== WRITE_TOOL_NAME &&
-        toolName !== EDIT_TOOL_NAME &&
-        toolName !== EXIT_PLAN_MODE_TOOL_NAME &&
-        toolName !== ENTER_PLAN_MODE_TOOL_NAME &&
-        toolName !== ASK_USER_QUESTION_TOOL_NAME &&
-        toolName !== BASH_TOOL_NAME &&
-        !!toolInput && (
-          <Box paddingLeft={2} borderLeft borderColor="cyan">
-            <Text>
-              {highlightToAnsi(JSON.stringify(toolInput, null, 2), "json")}
-            </Text>
-          </Box>
-        )}
+      <Text color="yellow" wrap="truncate-end">
+        {getActionDescription(toolName, toolInput)}
+      </Text>
+      {warning && (
+        <Text color="red" wrap="truncate-end">
+          ⚠ {warning}
+        </Text>
+      )}
 
-      {toolName !== ASK_USER_QUESTION_TOOL_NAME &&
-        toolName === EXIT_PLAN_MODE_TOOL_NAME &&
-        !!planContent && (
-          <PlanDisplay plan={planContent} isExpanded={isExpanded} />
-        )}
+      {hasMoreAbove && (
+        <Box>
+          <Text color="gray" dimColor>
+            ↑ {clampedOffset} more
+          </Text>
+        </Box>
+      )}
+      {visibleLines}
+      {hasMoreBelow && (
+        <Box>
+          <Text color="gray" dimColor>
+            ↓ {totalLines - clampedOffset - visibleCount} more
+          </Text>
+        </Box>
+      )}
+      {(hasMoreAbove || hasMoreBelow) && (
+        <Box>
+          <Text color="gray" dimColor>
+            PgUp/PgDn page • Ctrl+u/d half page
+          </Text>
+        </Box>
+      )}
     </Box>
   );
-
-  return content;
 };
 
 ConfirmationDetails.displayName = "ConfirmationDetails";