wave-code 0.2.0 → 0.4.0

package/src/components/MarketplaceList.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { KnownMarketplace } from "wave-agent-sdk";
+
+interface MarketplaceListProps {
+  marketplaces: KnownMarketplace[];
+  selectedIndex: number;
+}
+
+export const MarketplaceList: React.FC<MarketplaceListProps> = ({
+  marketplaces,
+  selectedIndex,
+}) => {
+  if (marketplaces.length === 0) {
+    return (
+      <Box padding={1}>
+        <Text dimColor>No marketplaces registered.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {marketplaces.map((marketplace, index) => {
+        const isSelected = index === selectedIndex;
+        const sourceStr =
+          marketplace.source.source === "directory"
+            ? marketplace.source.path
+            : marketplace.source.source === "github"
+              ? marketplace.source.repo
+              : marketplace.source.url;
+
+        return (
+          <Box key={marketplace.name} flexDirection="column" marginBottom={1}>
+            <Box>
+              <Text color={isSelected ? "cyan" : undefined}>
+                {isSelected ? "> " : "  "}
+                <Text bold>{marketplace.name}</Text>
+                {marketplace.isBuiltin && (
+                  <Text color="yellow"> [Built-in]</Text>
+                )}
+              </Text>
+            </Box>
+            <Box marginLeft={4}>
+              <Text dimColor>Source: {sourceStr}</Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/MarketplaceView.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+import { MarketplaceList } from "./MarketplaceList.js";
+
+export const MarketplaceView: React.FC = () => {
+  const { marketplaces, actions } = usePluginManagerContext();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(Math.min(marketplaces.length - 1, selectedIndex + 1));
+    } else if (key.return) {
+      const mk = marketplaces[selectedIndex];
+      if (mk) {
+        actions.setSelectedId(mk.name);
+        actions.setView("MARKETPLACE_DETAIL");
+      }
+    } else if (input === "a") {
+      actions.setView("ADD_MARKETPLACE");
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text color="green">Press 'a' to add a new marketplace</Text>
+      </Box>
+      <MarketplaceList
+        marketplaces={marketplaces}
+        selectedIndex={selectedIndex}
+      />
+      {marketplaces.length > 0 && (
+        <Box marginLeft={4} marginTop={1}>
+          <Text dimColor>Press Enter for actions</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/PluginDetail.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+const SCOPES = [
+  { id: "project", label: "Install for all collaborators (project scope)" },
+  { id: "user", label: "Install for you (user scope)" },
+  { id: "local", label: "Install for you, in this repo only (local scope)" },
+] as const;
+
+export const PluginDetail: React.FC = () => {
+  const { state, discoverablePlugins, installedPlugins, actions } =
+    usePluginManagerContext();
+  const [selectedScopeIndex, setSelectedScopeIndex] = useState(0);
+  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
+
+  const plugin =
+    discoverablePlugins.find(
+      (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+    ) ||
+    installedPlugins.find(
+      (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+    );
+
+  const INSTALLED_ACTIONS = [
+    { id: "uninstall", label: "Uninstall plugin" },
+    { id: "update", label: "Update plugin (reinstall)" },
+  ] as const;
+
+  const isInstalledAndEnabled = plugin && "enabled" in plugin && plugin.enabled;
+
+  useInput((input, key) => {
+    if (key.escape) {
+      const isFromDiscover = discoverablePlugins.find(
+        (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+      );
+      actions.setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
+    } else if (key.upArrow) {
+      if (isInstalledAndEnabled) {
+        setSelectedActionIndex((prev) =>
+          prev > 0 ? prev - 1 : INSTALLED_ACTIONS.length - 1,
+        );
+      } else {
+        setSelectedScopeIndex((prev) =>
+          prev > 0 ? prev - 1 : SCOPES.length - 1,
+        );
+      }
+    } else if (key.downArrow) {
+      if (isInstalledAndEnabled) {
+        setSelectedActionIndex((prev) =>
+          prev < INSTALLED_ACTIONS.length - 1 ? prev + 1 : 0,
+        );
+      } else {
+        setSelectedScopeIndex((prev) =>
+          prev < SCOPES.length - 1 ? prev + 1 : 0,
+        );
+      }
+    } else if (key.return && plugin) {
+      if (isInstalledAndEnabled) {
+        const action = INSTALLED_ACTIONS[selectedActionIndex].id;
+        if (action === "uninstall") {
+          actions.uninstallPlugin(plugin.name, plugin.marketplace);
+        } else {
+          actions.updatePlugin(plugin.name, plugin.marketplace);
+        }
+        actions.setView("INSTALLED");
+      } else {
+        actions.installPlugin(
+          plugin.name,
+          plugin.marketplace,
+          SCOPES[selectedScopeIndex].id,
+        );
+        actions.setView("INSTALLED");
+      }
+    }
+  });
+
+  if (!plugin) {
+    return (
+      <Box>
+        <Text color="red">Plugin not found.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          {plugin.name}
+        </Text>
+        <Text dimColor> @{plugin.marketplace}</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>{"description" in plugin ? plugin.description : ""}</Text>
+      </Box>
+
+      {plugin.version && (
+        <Box marginBottom={1}>
+          <Text>
+            Version: <Text color="blue">{plugin.version}</Text>
+          </Text>
+        </Box>
+      )}
+
+      <Box marginTop={1} flexDirection="column">
+        {isInstalledAndEnabled ? (
+          <Box flexDirection="column">
+            <Text bold>Plugin Actions:</Text>
+            {INSTALLED_ACTIONS.map((action, index) => (
+              <Text
+                key={action.id}
+                color={index === selectedActionIndex ? "yellow" : undefined}
+              >
+                {index === selectedActionIndex ? "> " : "  "}
+                {action.label}
+              </Text>
+            ))}
+            <Box marginTop={1}>
+              <Text dimColor>Use ↑/↓ to select, Enter to confirm</Text>
+            </Box>
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            <Text bold>Select Installation Scope:</Text>
+            {SCOPES.map((scope, index) => (
+              <Text
+                key={scope.id}
+                color={index === selectedScopeIndex ? "green" : undefined}
+              >
+                {index === selectedScopeIndex ? "> " : "  "}
+                {scope.label}
+              </Text>
+            ))}
+            <Box marginTop={1}>
+              <Text dimColor>Use ↑/↓ to select, Enter to install</Text>
+            </Box>
+          </Box>
+        )}
+        <Box marginTop={1}>
+          <Text dimColor>Press Esc to go back</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/PluginList.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { MarketplacePluginEntry } from "wave-agent-sdk";
+
+interface PluginListProps {
+  plugins: (MarketplacePluginEntry & {
+    marketplace: string;
+    installed: boolean;
+    version?: string;
+  })[];
+  selectedIndex: number;
+  onSelect?: (index: number) => void;
+}
+
+export const PluginList: React.FC<PluginListProps> = ({
+  plugins,
+  selectedIndex,
+}) => {
+  if (plugins.length === 0) {
+    return (
+      <Box padding={1}>
+        <Text dimColor>No plugins found.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {plugins.map((plugin, index) => {
+        const isSelected = index === selectedIndex;
+        const pluginId = `${plugin.name}@${plugin.marketplace}`;
+
+        return (
+          <Box key={pluginId} flexDirection="column" marginBottom={1}>
+            <Box>
+              <Text color={isSelected ? "cyan" : undefined}>
+                {isSelected ? "> " : "  "}
+                <Text bold>{plugin.name}</Text>
+                <Text dimColor> @{plugin.marketplace}</Text>
+                {plugin.version && <Text color="blue"> v{plugin.version}</Text>}
+              </Text>
+            </Box>
+            <Box marginLeft={4}>
+              <Text dimColor>{plugin.description}</Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/PluginManagerShell.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { ViewType } from "./PluginManagerTypes.js";
+import { usePluginManager } from "../hooks/usePluginManager.js";
+import { DiscoverView } from "./DiscoverView.js";
+import { InstalledView } from "./InstalledView.js";
+import { MarketplaceView } from "./MarketplaceView.js";
+import { MarketplaceDetail } from "./MarketplaceDetail.js";
+import { PluginDetail } from "./PluginDetail.js";
+import { MarketplaceAddForm } from "./MarketplaceAddForm.js";
+import { PluginManagerContext } from "../contexts/PluginManagerContext.js";
+
+export const PluginManagerShell: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
+  const pluginManager = usePluginManager();
+  const { state, actions, discoverablePlugins } = pluginManager;
+
+  const setView = (view: ViewType) => {
+    if (
+      view !== "PLUGIN_DETAIL" &&
+      view !== "MARKETPLACE_DETAIL" &&
+      view !== "ADD_MARKETPLACE"
+    ) {
+      actions.setSelectedId(null);
+    }
+    actions.setView(view);
+  };
+
+  useInput((input, key) => {
+    if (key.tab) {
+      const views: ViewType[] = ["DISCOVER", "INSTALLED", "MARKETPLACES"];
+      const currentIndex = views.indexOf(
+        state.currentView === "PLUGIN_DETAIL"
+          ? discoverablePlugins.find(
+              (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+            )
+            ? "DISCOVER"
+            : "INSTALLED"
+          : state.currentView === "MARKETPLACE_DETAIL" ||
+              state.currentView === "ADD_MARKETPLACE"
+            ? "MARKETPLACES"
+            : state.currentView,
+      );
+
+      let nextIndex;
+      if (key.shift) {
+        nextIndex = (currentIndex - 1 + views.length) % views.length;
+      } else {
+        nextIndex = (currentIndex + 1) % views.length;
+      }
+      setView(views[nextIndex]);
+    }
+    if (key.escape) {
+      if (state.currentView === "PLUGIN_DETAIL") {
+        const isFromDiscover = discoverablePlugins.find(
+          (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+        );
+        setView(isFromDiscover ? "DISCOVER" : "INSTALLED");
+      } else if (
+        state.currentView === "MARKETPLACE_DETAIL" ||
+        state.currentView === "ADD_MARKETPLACE"
+      ) {
+        setView("MARKETPLACES");
+      }
+    }
+  });
+
+  const renderView = () => {
+    if (state.isLoading && !state.selectedId) {
+      return (
+        <Box padding={1}>
+          <Text color="yellow">Loading...</Text>
+        </Box>
+      );
+    }
+
+    switch (state.currentView) {
+      case "DISCOVER":
+        return <DiscoverView />;
+      case "INSTALLED":
+        return <InstalledView />;
+      case "MARKETPLACES":
+        return <MarketplaceView />;
+      case "MARKETPLACE_DETAIL":
+        return <MarketplaceDetail />;
+      case "PLUGIN_DETAIL":
+        return <PluginDetail />;
+      case "ADD_MARKETPLACE":
+        return <MarketplaceAddForm />;
+      default:
+        return <DiscoverView />;
+    }
+  };
+
+  return (
+    <PluginManagerContext.Provider value={pluginManager}>
+      <Box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        borderStyle="round"
+        borderColor="cyan"
+      >
+        <Box
+          paddingX={1}
+          borderStyle="single"
+          borderBottom={true}
+          borderTop={false}
+          borderLeft={false}
+          borderRight={false}
+        >
+          <Box marginRight={2}>
+            <Text bold color="cyan">
+              Plugin Manager
+            </Text>
+          </Box>
+          <Box>
+            <Text
+              color={
+                state.currentView === "DISCOVER" ||
+                (state.currentView === "PLUGIN_DETAIL" &&
+                  !!discoverablePlugins.find(
+                    (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+                  ))
+                  ? "yellow"
+                  : undefined
+              }
+            >
+              {" "}
+              Discover{" "}
+            </Text>
+            <Text
+              color={
+                state.currentView === "INSTALLED" ||
+                (state.currentView === "PLUGIN_DETAIL" &&
+                  !discoverablePlugins.find(
+                    (p) => `${p.name}@${p.marketplace}` === state.selectedId,
+                  ))
+                  ? "yellow"
+                  : undefined
+              }
+            >
+              {" "}
+              Installed{" "}
+            </Text>
+            <Text
+              color={
+                state.currentView === "MARKETPLACES" ||
+                state.currentView === "MARKETPLACE_DETAIL" ||
+                state.currentView === "ADD_MARKETPLACE"
+                  ? "yellow"
+                  : undefined
+              }
+            >
+              {" "}
+              Marketplaces{" "}
+            </Text>
+          </Box>
+        </Box>
+
+        <Box flexGrow={1} flexDirection="column" padding={1}>
+          {renderView()}
+          {children}
+        </Box>
+
+        <Box
+          paddingX={1}
+          borderStyle="single"
+          borderTop={true}
+          borderBottom={false}
+          borderLeft={false}
+          borderRight={false}
+        >
+          <Text dimColor>
+            {state.isLoading
+              ? "Loading..."
+              : "Use Tab to switch views, arrows to navigate, Enter to select, Esc to go back"}
+          </Text>
+          {state.error && (
+            <Box marginLeft={2}>
+              <Text color="red">Error: {state.error}</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </PluginManagerContext.Provider>
+  );
+};

package/src/components/PluginManagerTypes.ts

@@ -0,0 +1,47 @@
+import {
+  KnownMarketplace,
+  InstalledPlugin,
+  MarketplacePluginEntry,
+} from "wave-agent-sdk";
+
+export type ViewType =
+  | "DISCOVER"
+  | "INSTALLED"
+  | "MARKETPLACES"
+  | "PLUGIN_DETAIL"
+  | "MARKETPLACE_DETAIL"
+  | "ADD_MARKETPLACE";
+
+export interface PluginManagerState {
+  currentView: ViewType;
+  selectedId: string | null; // Plugin name or Marketplace name
+  isLoading: boolean;
+  error: string | null;
+  searchQuery: string;
+}
+
+export interface PluginManagerContextType {
+  state: PluginManagerState;
+  marketplaces: KnownMarketplace[];
+  installedPlugins: (InstalledPlugin & { enabled: boolean })[];
+  discoverablePlugins: (MarketplacePluginEntry & {
+    marketplace: string;
+    installed: boolean;
+    version?: string;
+  })[];
+  actions: {
+    setView: (view: ViewType) => void;
+    setSelectedId: (id: string | null) => void;
+    addMarketplace: (source: string) => Promise<void>;
+    removeMarketplace: (name: string) => Promise<void>;
+    updateMarketplace: (name: string) => Promise<void>;
+    installPlugin: (
+      name: string,
+      marketplace: string,
+      scope?: "user" | "project" | "local",
+    ) => Promise<void>;
+    uninstallPlugin: (name: string, marketplace: string) => Promise<void>;
+    updatePlugin: (name: string, marketplace: string) => Promise<void>;
+    refresh: () => Promise<void>;
+  };
+}

package/src/components/RewindCommand.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Message, TextBlock } from "wave-agent-sdk";
+
+export interface RewindCommandProps {
+  messages: Message[];
+  onSelect: (index: number) => void;
+  onCancel: () => void;
+}
+
+export const RewindCommand: React.FC<RewindCommandProps> = ({
+  messages,
+  onSelect,
+  onCancel,
+}) => {
+  // Filter user messages as checkpoints
+  const checkpoints = messages
+    .map((msg, index) => ({ msg, index }))
+    .filter(({ msg }) => msg.role === "user");
+
+  const [selectedIndex, setSelectedIndex] = useState(checkpoints.length - 1);
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (checkpoints.length > 0 && selectedIndex >= 0) {
+        onSelect(checkpoints[selectedIndex].index);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(Math.min(checkpoints.length - 1, selectedIndex + 1));
+      return;
+    }
+  });
+
+  if (checkpoints.length === 0) {
+    return (
+      <Box
+        flexDirection="column"
+        paddingX={1}
+        borderStyle="single"
+        borderColor="yellow"
+        borderLeft={false}
+        borderRight={false}
+      >
+        <Text color="yellow">No user messages found to rewind to.</Text>
+        <Text dimColor>Press Escape to cancel</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      paddingX={1}
+      gap={1}
+      borderStyle="single"
+      borderColor="cyan"
+      borderLeft={false}
+      borderRight={false}
+    >
+      <Box>
+        <Text color="cyan" bold>
+          Rewind: Select a message to revert to
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        {checkpoints.map((checkpoint, index) => {
+          const isSelected = index === selectedIndex;
+          const content = checkpoint.msg.blocks
+            .filter((b): b is TextBlock => b.type === "text")
+            .map((b) => b.content)
+            .join(" ")
+            .substring(0, 60);
+
+          return (
+            <Box key={checkpoint.index}>
+              <Text
+                color={isSelected ? "black" : "white"}
+                backgroundColor={isSelected ? "cyan" : undefined}
+              >
+                {isSelected ? "▶ " : "  "}[{checkpoint.index}]{" "}
+                {content || "(No text content)"}
+                {index === checkpoints.length - 1 ? " (Latest)" : ""}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      <Box>
+        <Text dimColor>↑↓ navigate • Enter to rewind • Esc to cancel</Text>
+      </Box>
+      <Box>
+        <Text color="red" dimColor>
+          ⚠️ Warning: This will delete all subsequent messages and revert file
+          changes.
+        </Text>
+      </Box>
+    </Box>
+  );
+};