wave-code 1.1.5 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.1.5",
+  "version": "1.3.0",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -28,7 +28,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@vscode/ripgrep": "^1.18.0"
+    "@vscode/ripgrep": "^1.18.0",
+    "sharp": "^0.35.4"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
@@ -56,7 +57,7 @@
     "wrap-ansi": "^10.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "1.1.5"
+    "wave-agent-sdk": "1.3.0"
   },
   "engines": {
     "node": ">=22"

package/src/cli.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "ink";
+import { ensureRuntimeDeps } from "wave-agent-sdk";
 import { App } from "./components/App.js";
 import { cleanupLogs } from "./utils/logger.js";
 import { removeWorktree } from "./utils/worktree.js";
@@ -11,6 +12,14 @@ export interface CliOptions extends BaseAppProps {
 }
 
 export async function startCli(options: CliOptions): Promise<void> {
+  // Install the on-demand runtime dependencies (image codec + ripgrep) before
+  // the UI comes up. Waiting is the point: pasting an image or running a search
+  // a second later must not race a download. Costs ~16ms once they are
+  // installed (marker hit), ~6MB/20MB worth of time on the first run of a
+  // host-bundled CLI. A failed download only degrades the affected tool — never
+  // throws.
+  await ensureRuntimeDeps();
+
   const {
     restoreSessionId,
     continueLastSession,

package/src/commands/plugin/install.ts

@@ -8,17 +8,16 @@ export async function installPluginCommand(argv: {
   const pluginCore = new PluginCore(workdir);
 
   try {
-    const installed = await pluginCore.installPlugin(argv.plugin);
+    // When no scope is given, default to user scope (matches Claude Code).
+    const scope = argv.scope ?? "user";
+    const installed = await pluginCore.installPlugin(argv.plugin, scope);
     console.log(
       `Successfully installed plugin: ${installed.name} v${installed.version} from ${installed.marketplace}`,
     );
     console.log(`Cache path: ${installed.cachePath}`);
-
-    if (argv.scope) {
-      const pluginId = `${installed.name}@${installed.marketplace}`;
-      await pluginCore.enablePlugin(pluginId, argv.scope);
-      console.log(`Plugin ${pluginId} enabled in ${argv.scope} scope`);
-    }
+    console.log(
+      `Plugin ${installed.name}@${installed.marketplace} enabled in ${scope} scope`,
+    );
 
     process.exit(0);
   } catch (error) {

package/src/commands/plugin/uninstall.ts

@@ -1,13 +1,19 @@
-import { PluginCore } from "wave-agent-sdk";
+import { PluginCore, Scope } from "wave-agent-sdk";
 
-export async function uninstallPluginCommand(argv: { plugin: string }) {
+export async function uninstallPluginCommand(argv: {
+  plugin: string;
+  scope?: Scope;
+}) {
   const workdir = process.cwd();
   const pluginCore = new PluginCore(workdir);
 
   try {
-    await pluginCore.uninstallPlugin(argv.plugin);
-    console.log(`Successfully uninstalled plugin: ${argv.plugin}`);
-    console.log(`Cleaned up plugin configuration from all scopes`);
+    // Only the given scope is uninstalled (spec plugin A-015). Without --scope
+    // the core picks the scope the plugin is enabled in for this directory.
+    const scope = await pluginCore.uninstallPlugin(argv.plugin, argv.scope);
+    console.log(
+      `Successfully uninstalled plugin: ${argv.plugin} (scope: ${scope})`,
+    );
     process.exit(0);
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);

package/src/components/ChatInterface.tsx

@@ -29,6 +29,7 @@ export const ChatInterface: React.FC = () => {
     maxInputTokens,
     slashCommands,
     hasSlashCommand,
+    hooks,
     isConfirmationVisible,
     confirmingTool,
     handleConfirmationDecision,
@@ -109,6 +110,7 @@ export const ChatInterface: React.FC = () => {
             disconnectMcpServer={disconnectMcpServer}
             slashCommands={slashCommands}
             hasSlashCommand={hasSlashCommand}
+            hooks={hooks}
             latestTotalTokens={latestTotalTokens}
             maxInputTokens={maxInputTokens}
             showLoginHint={showLoginHint}
@@ -130,6 +132,7 @@ export const ChatInterface: React.FC = () => {
             toolInput={confirmingTool!.input}
             suggestedPrefix={confirmingTool!.suggestedPrefix}
             hidePersistentOption={confirmingTool!.hidePersistentOption}
+            outsideSafeZoneDirectory={confirmingTool!.outsideSafeZoneDirectory}
             permissionMode={confirmingTool!.permissionMode}
             isExpanded={isExpanded}
             onDecision={handleConfirmationDecision}

package/src/components/ConfirmationDetails.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
 import {
   BASH_TOOL_NAME,
   EDIT_TOOL_NAME,
@@ -10,6 +10,8 @@ import {
   ARTIFACT_TOOL_NAME,
 } from "wave-agent-sdk";
 import { buildDiffLinesFromParams } from "./DiffDisplay.js";
+import { renderMarkdownToAnsi } from "./Markdown.js";
+import { ScrolledContent } from "./ScrolledContent.js";
 import { highlightToAnsi } from "../utils/highlightUtils.js";
 
 // Helper function to generate descriptive action text
@@ -35,6 +37,9 @@ const getActionDescription = (
     case ASK_USER_QUESTION_TOOL_NAME:
       return "Answer questions to clarify intent";
     case ARTIFACT_TOOL_NAME:
+      if (toolInput.action === "read") {
+        return `Read artifact: ${toolInput.url || "unknown artifact"}`;
+      }
       return `Publish file: ${toolInput.file_path || "unknown file"}`;
     default:
       return "Execute operation";
@@ -68,6 +73,11 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
     (toolInput?.startLineNumber as number | undefined) ??
     (toolName === WRITE_TOOL_NAME ? 1 : undefined);
 
+  // Terminal width is needed to render the plan's Markdown (table column widths
+  // are computed from it), matching <Markdown>'s own default.
+  const { stdout } = useStdout();
+  const columns = stdout?.columns ?? 80;
+
   const headerRows = 2 + (warning ? 1 : 0);
 
   // Number of content rows rendered at once. The header stays fixed above the
@@ -117,12 +127,17 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
     toolName === EXIT_PLAN_MODE_TOOL_NAME &&
     !!planContent;
 
+  // The plan is Markdown (the agent writes it to a .md file), so it is rendered
+  // with the same renderer as assistant messages and then linearized into rows
+  // for the row-slicing scroll above — same treatment as the JSON/diff rows.
   const planLines = showPlan
-    ? planContent!.split("\n").map((line, index) => (
-        <Box key={`plan-${index}`}>
-          <Text>{line || " "}</Text>
-        </Box>
-      ))
+    ? renderMarkdownToAnsi(planContent!, columns)
+        .split("\n")
+        .map((line, index) => (
+          <Box key={`plan-${index}`}>
+            <Text>{line || " "}</Text>
+          </Box>
+        ))
     : [];
 
   const contentLines: React.ReactNode[] = [
@@ -130,9 +145,11 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
     ...jsonLines,
     ...planLines,
   ];
-  const totalLines = contentLines.length;
-  const maxScroll = Math.max(0, totalLines - visibleCount);
 
+  // Rows really occupied by the content (wrapped rows included), measured after
+  // layout by <ScrolledContent> — see that component for why it is measured
+  // instead of counted from the row array.
+  const [contentRows, setContentRows] = useState(0);
   const [scrollOffset, setScrollOffset] = useState(0);
 
   // Reset scrolling when a new confirmation appears.
@@ -140,6 +157,8 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
     setScrollOffset(0);
   }, [toolName, toolInput, planContent]);
 
+  const maxScroll = Math.max(0, contentRows - visibleCount);
+
   const halfPage = Math.max(1, Math.ceil(visibleCount / 2));
   useInput((input, key) => {
     if (key.pageUp) {
@@ -159,12 +178,8 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
   });
 
   const clampedOffset = Math.min(scrollOffset, maxScroll);
-  const visibleLines = contentLines.slice(
-    clampedOffset,
-    clampedOffset + visibleCount,
-  );
   const hasMoreAbove = clampedOffset > 0;
-  const hasMoreBelow = clampedOffset + visibleCount < totalLines;
+  const hasMoreBelow = clampedOffset + visibleCount < contentRows;
 
   return (
     <Box
@@ -195,11 +210,17 @@ export const ConfirmationDetails: React.FC<ConfirmationDetailsProps> = ({
           </Text>
         </Box>
       )}
-      {visibleLines}
+      <ScrolledContent
+        visibleRows={visibleCount}
+        scrollOffset={clampedOffset}
+        onMeasuredRows={setContentRows}
+      >
+        {contentLines}
+      </ScrolledContent>
       {hasMoreBelow && (
         <Box>
           <Text color="gray" dimColor>
-            ↓ {totalLines - clampedOffset - visibleCount} more
+            ↓ {contentRows - clampedOffset - visibleCount} more
           </Text>
         </Box>
       )}

package/src/components/ConfirmationSelector.tsx

@@ -7,8 +7,10 @@ import type {
 } from "wave-agent-sdk";
 import {
   BASH_TOOL_NAME,
+  EDIT_TOOL_NAME,
   EXIT_PLAN_MODE_TOOL_NAME,
   ENTER_PLAN_MODE_TOOL_NAME,
+  WRITE_TOOL_NAME,
   ASK_USER_QUESTION_TOOL_NAME,
 } from "wave-agent-sdk";
 import { confirmationReducer } from "../reducers/confirmationReducer.js";
@@ -24,11 +26,19 @@ const getHeaderColor = (header: string) => {
   return colors[Math.abs(hash) % colors.length];
 };
 
+/** Last path segment of a directory path (handles both `/` and `\` separators). */
+const lastPathSegment = (dirPath: string): string => {
+  const segments = dirPath.split(/[\\/]/).filter(Boolean);
+  return segments[segments.length - 1] ?? dirPath;
+};
+
 export interface ConfirmationSelectorProps {
   toolName: string;
   toolInput?: Record<string, unknown>;
   suggestedPrefix?: string;
   hidePersistentOption?: boolean;
+  /** Directory holding an out-of-Safe-Zone Write/Edit target, when the host reports one. */
+  outsideSafeZoneDirectory?: string;
   permissionMode?: PermissionMode;
   isExpanded?: boolean;
   onDecision: (decision: PermissionDecision) => void;
@@ -40,6 +50,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
   toolInput,
   suggestedPrefix,
   hidePersistentOption,
+  outsideSafeZoneDirectory,
   permissionMode,
   isExpanded = false,
   onDecision,
@@ -104,6 +115,15 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
     return "Yes, and auto-accept edits";
   };
 
+  // Only Write/Edit can be out of the Safe Zone, and the host only reports the
+  // directory for such requests.
+  const showAddDirectoryOption =
+    (toolName === EDIT_TOOL_NAME || toolName === WRITE_TOOL_NAME) &&
+    !!outsideSafeZoneDirectory;
+  const addDirectoryOptionText = `Yes, and allow all edits in ${lastPathSegment(
+    outsideSafeZoneDirectory ?? "",
+  )}/ this session`;
+
   const pasteDetectorRef = useRef(createBracketedPasteDetector());
 
   useInput((input, key) => {
@@ -140,6 +160,7 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
         toolInput,
         suggestedPrefix,
         hidePersistentOption,
+        outsideSafeZoneDirectory,
         permissionMode,
       });
     }
@@ -248,6 +269,24 @@ export const ConfirmationSelector: React.FC<ConfirmationSelectorProps> = ({
                   : "Yes, proceed"}
               </Text>
             </Box>
+            {showAddDirectoryOption && (
+              <Box key="add-directory-option">
+                <Text
+                  color={
+                    state.selectedOption === "addDirectory" ? "black" : "white"
+                  }
+                  backgroundColor={
+                    state.selectedOption === "addDirectory"
+                      ? "yellow"
+                      : undefined
+                  }
+                  bold={state.selectedOption === "addDirectory"}
+                >
+                  {state.selectedOption === "addDirectory" ? "> " : "  "}
+                  {addDirectoryOptionText}
+                </Text>
+              </Box>
+            )}
             {!hidePersistentOption && (
               <Box key="auto-option">
                 <Text

package/src/components/HooksManager.tsx

@@ -0,0 +1,286 @@
+import React, { useEffect, useMemo, useReducer } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import {
+  HOOK_EVENT_SUMMARIES,
+  type HookEvent,
+  type HookEventConfig,
+} from "wave-agent-sdk";
+import {
+  hooksManagerReducer,
+  type HooksManagerState,
+} from "../reducers/hooksManagerReducer.js";
+
+export interface HooksManagerProps {
+  onCancel: () => void;
+  /** Hook configs per scope (user/project/plugin settings.json + plugin set). */
+  hooks: Partial<
+    Record<"user" | "project" | "plugin", Record<string, HookEventConfig[]>>
+  >;
+}
+
+interface DisplayEntry {
+  kind: "header" | "hook" | "empty";
+  label: string;
+  sub?: string;
+  scope?: "user" | "project" | "plugin";
+  selectableIndex: number; // -1 for non-selectable rows
+  hook?: {
+    event: string;
+    matcher?: string;
+    config: HookEventConfig;
+  };
+}
+
+const SCOPE_LABELS: Record<"user" | "project" | "plugin", string> = {
+  user: "User hooks",
+  project: "Project hooks",
+  plugin: "Plugin hooks",
+};
+
+const SCOPE_ORDER: Array<"user" | "project" | "plugin"> = [
+  "user",
+  "project",
+  "plugin",
+];
+
+const initialState: HooksManagerState = {
+  selectedIndex: 0,
+  viewMode: "list",
+  pendingEffect: null,
+};
+
+/** Hook name for display: `Event:Matcher` when a matcher is present, else the
+ * event name alone. */
+function formatHookName(event: string, matcher?: string): string {
+  return matcher ? `${event}:${matcher}` : event;
+}
+
+export const HooksManager: React.FC<HooksManagerProps> = ({
+  onCancel,
+  hooks,
+}) => {
+  const [state, dispatch] = useReducer(hooksManagerReducer, initialState);
+  const { stdout } = useStdout();
+
+  // Handle pending effects
+  useEffect(() => {
+    if (!state.pendingEffect) return;
+    const effect = state.pendingEffect;
+    dispatch({ type: "CLEAR_PENDING_EFFECT" });
+    if (effect.type === "CANCEL") {
+      onCancel();
+    }
+  }, [state.pendingEffect, onCancel]);
+
+  // Flatten hooks (grouped by scope) into one navigable list. Headers and
+  // the empty-state line are non-selectable.
+  const entries = useMemo<DisplayEntry[]>(() => {
+    const result: DisplayEntry[] = [];
+    let selectableCount = 0;
+
+    result.push({ kind: "header", label: "HOOKS", selectableIndex: -1 });
+    let hookCount = 0;
+    for (const scope of SCOPE_ORDER) {
+      const scoped = hooks[scope] ?? {};
+      const rows: DisplayEntry[] = [];
+      for (const [event, configs] of Object.entries(scoped)) {
+        for (const config of configs ?? []) {
+          const matcher = config.matcher;
+          const name = formatHookName(event, matcher);
+          rows.push({
+            kind: "hook",
+            label: name,
+            sub:
+              HOOK_EVENT_SUMMARIES[event as HookEvent] ??
+              config.hooks[0]?.command,
+            scope,
+            selectableIndex: selectableCount++,
+            hook: { event, matcher, config },
+          });
+        }
+      }
+      if (rows.length === 0) continue;
+      result.push({
+        kind: "header",
+        label: SCOPE_LABELS[scope],
+        scope,
+        selectableIndex: -1,
+      });
+      result.push(...rows);
+      hookCount += rows.length;
+    }
+    if (hookCount === 0) {
+      result.push({
+        kind: "empty",
+        label: "No hooks configured",
+        selectableIndex: -1,
+      });
+    }
+
+    return result;
+  }, [hooks]);
+
+  const itemCount = entries.filter((e) => e.selectableIndex >= 0).length;
+
+  // Window slice: center the selected item within the visible area, clamping
+  // to the terminal's available rows (reusable pattern from
+  // AgentsManager/SkillsManager).
+  const availableRows = stdout?.rows ?? 24;
+  const maxVisible = Math.max(3, Math.min(15, availableRows - 12));
+  const selectedFlatIndex = entries.findIndex(
+    (e) => e.selectableIndex === state.selectedIndex,
+  );
+  const startIndex = Math.max(
+    0,
+    Math.min(
+      selectedFlatIndex - Math.floor(maxVisible / 2),
+      Math.max(0, entries.length - maxVisible),
+    ),
+  );
+  const visibleEntries = entries.slice(startIndex, startIndex + maxVisible);
+
+  useInput((input, key) => {
+    dispatch({ type: "HANDLE_KEY", input, key, itemCount });
+  });
+
+  const selectedEntry = entries.find(
+    (e) => e.selectableIndex === state.selectedIndex,
+  );
+
+  // Detail view — body renders fully expanded with no height limit, no
+  // clipping and no scrolling (aligned with AgentsManager/SkillsManager).
+  if (state.viewMode === "detail" && selectedEntry?.hook) {
+    const { event, matcher, config } = selectedEntry.hook;
+    const summary = HOOK_EVENT_SUMMARIES[event as HookEvent];
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+        gap={1}
+      >
+        <Box>
+          <Text color="cyan" bold>
+            Hook: {formatHookName(event, matcher)}
+          </Text>
+        </Box>
+
+        <Box flexDirection="column" gap={1}>
+          <Box>
+            <Text wrap="wrap">
+              <Text color="blue">Event:</Text> {event}
+              {summary ? ` — ${summary}` : ""}
+            </Text>
+          </Box>
+          {matcher && (
+            <Box>
+              <Text>
+                <Text color="blue">Matcher:</Text> {matcher}
+              </Text>
+            </Box>
+          )}
+          <Box flexDirection="column" gap={0}>
+            <Text color="blue">Commands:</Text>
+            {config.hooks.map((hook, index) => (
+              <Text key={index} wrap="wrap">
+                {index + 1}. {hook.command}
+                {hook.async ? " (async)" : ""}
+                {hook.timeout ? ` (timeout ${hook.timeout}s)` : ""}
+              </Text>
+            ))}
+          </Box>
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>Esc or Enter to go back</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (itemCount === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="cyan"
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+        paddingTop={1}
+      >
+        <Text color="cyan" bold>
+          Hooks
+        </Text>
+        <Text>No hooks configured</Text>
+        <Text dimColor>
+          Configure hooks in the hooks field of ~/.wave/settings.json or
+          .wave/settings.json, or ask Claude to set one up for you
+        </Text>
+        <Text dimColor>Press Escape to close</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="cyan"
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingTop={1}
+      gap={1}
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Hooks
+        </Text>
+      </Box>
+      <Text dimColor>Select a hook to view details</Text>
+
+      <Box flexDirection="column">
+        {visibleEntries.map((entry, index) => {
+          const isSelected = entry.selectableIndex === state.selectedIndex;
+          if (entry.kind === "header") {
+            return (
+              <Text key={`${entry.kind}-${entry.label}-${index}`} dimColor bold>
+                {entry.label}
+              </Text>
+            );
+          }
+          if (entry.kind === "empty") {
+            return (
+              <Text key={`empty-${index}`} dimColor>
+                {entry.label}
+              </Text>
+            );
+          }
+          return (
+            <Text
+              key={`${entry.kind}-${entry.selectableIndex}`}
+              color={isSelected ? "black" : "white"}
+              backgroundColor={isSelected ? "cyan" : undefined}
+              wrap="truncate-end"
+            >
+              {isSelected ? "▶ " : "  "}
+              {entry.selectableIndex + 1}. {entry.label}
+              {entry.sub ? ` · ${entry.sub}` : ""}
+            </Text>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          ↑/↓ to select · Enter to view details · Esc to close
+        </Text>
+      </Box>
+    </Box>
+  );
+};