wave-code 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.2.0",
+  "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.2.0"
+    "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}`);
-
-    // When no scope is given, default to user scope (matches Claude Code).
-    const scope = argv.scope ?? "user";
-    const pluginId = `${installed.name}@${installed.marketplace}`;
-    await pluginCore.enablePlugin(pluginId, scope);
-    console.log(`Plugin ${pluginId} enabled in ${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

@@ -132,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/InputBox.tsx

@@ -10,6 +10,7 @@ import { AgentsManager } from "./AgentsManager.js";
 import { SkillsManager } from "./SkillsManager.js";
 import { HooksManager } from "./HooksManager.js";
 import { RewindCommand } from "./RewindCommand.js";
+import { ResumeCommand } from "./ResumeCommand.js";
 import { HelpView } from "./HelpView.js";
 import { StatusCommand } from "./StatusCommand.js";
 import { LoginCommand } from "./LoginCommand.js";
@@ -86,6 +87,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     permissionMode: chatPermissionMode,
     setPermissionMode: setChatPermissionMode,
     handleRewindSelect,
+    resumeSession,
     backgroundCurrentTask,
     messages,
     getFullMessageThread,
@@ -95,10 +97,13 @@ export const InputBox: React.FC<InputBoxProps> = ({
     clearMessages,
     compact,
     addDir,
+    renameSession,
     currentModel,
     configuredModels,
     setModel,
-    recreateAgent,
+    reloadPlugins,
+    notifyPluginChange,
+    pluginHint,
     recallQueuedMessage,
     queuedMessages,
     setIsBtwActive,
@@ -153,6 +158,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     showMcpManager,
     showAgentsManager,
     showRewindManager,
+    showResumeSelector,
     showHelp,
     showStatusCommand,
     showLoginCommand,
@@ -165,6 +171,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     setShowMcpManager,
     setShowAgentsManager,
     setShowRewindManager,
+    setShowResumeSelector,
     setShowHelp,
     setShowStatusCommand,
     setShowLoginCommand,
@@ -191,7 +198,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
     onAskBtw: askBtw,
     onClearMessages: clearMessages,
     onCompact: compact,
+    onReloadPlugins: reloadPlugins,
     onAddDir: addDir,
+    onRenameSession: renameSession,
     onHasSlashCommand: hasSlashCommand,
     onAbortMessage: abortMessage,
     onBackgroundCurrentTask: backgroundCurrentTask,
@@ -230,6 +239,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
     if (
       planView ||
       showRewindManager ||
+      showResumeSelector ||
       showHelp ||
       showStatusCommand ||
       showLoginCommand ||
@@ -283,6 +293,21 @@ export const InputBox: React.FC<InputBoxProps> = ({
     await handleRewindSelect(index);
   };
 
+  const handleResumeSelectWithClose = async (
+    sessionId: string,
+    resumeWorkdir?: string,
+  ) => {
+    setShowResumeSelector(false);
+    // The switch replaces the whole conversation; a draft typed for the old
+    // session would otherwise silently become the first message of the new one.
+    setInputText("");
+    await resumeSession(sessionId, resumeWorkdir);
+  };
+
+  const handleResumeCancel = () => {
+    setShowResumeSelector(false);
+  };
+
   return (
     <Box flexDirection="column">
       <BtwDisplay btwState={btwState} />
@@ -363,6 +388,15 @@ export const InputBox: React.FC<InputBoxProps> = ({
         />
       )}
 
+      {showResumeSelector && (
+        <ResumeCommand
+          workdir={workingDirectory}
+          isBusy={!isIdle}
+          onSelect={handleResumeSelectWithClose}
+          onCancel={handleResumeCancel}
+        />
+      )}
+
       {showHelp && (
         <HelpView
           onCancel={() => setShowHelp(false)}
@@ -381,7 +415,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
       {showPluginManager && (
         <PluginManagerShell
           onCancel={() => setShowPluginManager(false)}
-          onPluginInstalled={recreateAgent}
+          onPluginChanged={notifyPluginChange}
         />
       )}
 
@@ -411,7 +445,9 @@ export const InputBox: React.FC<InputBoxProps> = ({
             showMcpManager ||
             showAgentsManager ||
             showSkillsManager ||
+            showHooksManager ||
             showRewindManager ||
+            showResumeSelector ||
             showHelp ||
             showStatusCommand ||
             showLoginCommand ||
@@ -451,6 +487,7 @@ export const InputBox: React.FC<InputBoxProps> = ({
                     latestTotalTokens={latestTotalTokens}
                     maxInputTokens={maxInputTokens}
                     showLoginHint={showLoginHint}
+                    pluginHint={pluginHint}
                   />
                 </Box>
               </Box>

package/src/components/Markdown.tsx

@@ -137,21 +137,34 @@ class AnsiRenderer extends Renderer<string> {
 
 const createRenderer = (columns: number) => new AnsiRenderer(columns);
 
+/** Renders Markdown to ANSI-styled text using the same renderer as <Markdown>.
+ *  Callers that must linearize content into rows (e.g. the confirmation
+ *  details area, which slices rows for PgUp/PgDn scrolling) render first and
+ *  then split the result into lines. */
+export const renderMarkdownToAnsi = (
+  content: string,
+  columns: number,
+): string => {
+  const ansi = marked.parse(content, {
+    renderer: createRenderer(columns),
+    gfm: true,
+    breaks: true,
+  }) as string;
+  return ansi.trim();
+};
+
 // Markdown component using custom ANSI renderer
 export const Markdown = React.memo(({ children }: MarkdownProps) => {
   const { stdout } = useStdout();
   const columns = stdout?.columns ?? 80;
-  const ansiContent = useMemo(() => {
-    return marked.parse(children, {
-      renderer: createRenderer(columns),
-      gfm: true,
-      breaks: true,
-    }) as string;
-  }, [children, columns]);
+  const ansiContent = useMemo(
+    () => renderMarkdownToAnsi(children, columns),
+    [children, columns],
+  );
 
   return (
     <Box flexDirection="column">
-      <Text>{ansiContent.trim()}</Text>
+      <Text>{ansiContent}</Text>
     </Box>
   );
 });

package/src/components/MarketplaceDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect, useMemo } from "react";
+import React, { useReducer, useEffect } from "react";
 import { Box, Text, useInput } from "ink";
 import { usePluginManagerContext } from "../contexts/PluginManagerContext.js";
 import {
@@ -6,6 +6,13 @@ import {
   type SelectorState,
 } from "../reducers/selectorReducer.js";
 
+const ACTIONS = [
+  // 先刷新该市场检出，再把该市场内所有可更新插件一次升掉（范围恒为当前市场，
+  // spec 插件市场场景 13）
+  { id: "update", label: "Update plugins (batch)" },
+  { id: "remove", label: "Remove marketplace" },
+] as const;
+
 export const MarketplaceDetail: React.FC = () => {
   const { state, marketplaces, actions } = usePluginManagerContext();
   const [selectorState, dispatch] = useReducer(
@@ -25,23 +32,10 @@ export const MarketplaceDetail: React.FC = () => {
 
   const marketplace = marketplaces.find((m) => m.name === state.selectedId);
 
-  const ACTIONS = useMemo(
-    () =>
-      [
-        {
-          id: "toggle-auto-update",
-          label: `${marketplace?.autoUpdate ? "Disable" : "Enable"} auto-update`,
-        },
-        { id: "update", label: "Update marketplace" },
-        { id: "remove", label: "Remove marketplace" },
-      ] as const,
-    [marketplace?.autoUpdate],
-  );
-
   // Sync ACTIONS into reducer state
   useEffect(() => {
     dispatch({ type: "SET_ITEMS", items: [...ACTIONS] });
-  }, [ACTIONS]);
+  }, []);
 
   useInput((_input, key) => {
     if (state.isLoading && !key.escape) return;
@@ -58,9 +52,7 @@ export const MarketplaceDetail: React.FC = () => {
 
     if (pendingDecision === "select" && marketplace && !state.isLoading) {
       const action = actionsList[selectedActionIndex]?.id;
-      if (action === "toggle-auto-update") {
-        actions.toggleAutoUpdate(marketplace.name, !marketplace.autoUpdate);
-      } else if (action === "update") {
+      if (action === "update") {
         actions.updateMarketplace(marketplace.name);
       } else if (action === "remove") {
         actions.removeMarketplace(marketplace.name);
@@ -104,15 +96,6 @@ export const MarketplaceDetail: React.FC = () => {
         <Text>Source: {JSON.stringify(marketplace.source)}</Text>
       </Box>
 
-      <Box marginBottom={1}>
-        <Text>
-          Auto-update:{" "}
-          <Text color={marketplace.autoUpdate ? "green" : "red"}>
-            {marketplace.autoUpdate ? "Enabled" : "Disabled"}
-          </Text>
-        </Text>
-      </Box>
-
       {marketplace.lastUpdated && (
         <Box marginBottom={1}>
           <Text>

package/src/components/MarketplaceView.tsx

@@ -10,7 +10,12 @@ import {
 import { MarketplaceList } from "./MarketplaceList.js";
 
 export const MarketplaceView: React.FC = () => {
-  const { marketplaces, actions } = usePluginManagerContext();
+  const {
+    marketplaces,
+    checkingForUpdates,
+    state: managerState,
+    actions,
+  } = usePluginManagerContext();
   const [state, dispatch] = useReducer(selectorReducer<KnownMarketplace>, {
     selectedIndex: 0,
     pendingDecision: null,
@@ -19,10 +24,16 @@ export const MarketplaceView: React.FC = () => {
 
   const { selectedIndex, pendingDecision, items } = state;
 
-  // Sync marketplaces into reducer state
+  // Sync marketplaces into reducer state；焦点落到当前选中的市场（新增市场后由
+  // addMarketplace 设成新市场名，spec「管理市场」场景 5），没有匹配（首帧、市场被
+  // 移除）时保持 SET_ITEMS 归零后的列表首项。
   useEffect(() => {
     dispatch({ type: "SET_ITEMS", items: marketplaces });
-  }, [marketplaces]);
+    const index = marketplaces.findIndex(
+      (m) => m.name === managerState.selectedId,
+    );
+    if (index > 0) dispatch({ type: "SET_INDEX", index });
+  }, [marketplaces, managerState.selectedId]);
 
   useInput((input, key) => {
     if (input === "a") {
@@ -52,6 +63,9 @@ export const MarketplaceView: React.FC = () => {
     <Box flexDirection="column">
       <Box marginBottom={1}>
         <Text color="green">Press 'a' to add a new marketplace</Text>
+        {/* 打开插件管理器触发的后台清单刷新（只拉检出、不升级插件）：不阻塞
+            列表浏览，完成后重读并呈现最新清单（spec ecosystem/plugin 场景 12） */}
+        {checkingForUpdates && <Text dimColor> Checking for updates...</Text>}
       </Box>
       <MarketplaceList
         marketplaces={marketplaces}

package/src/components/Notifications.tsx

@@ -5,12 +5,18 @@ export interface NotificationsProps {
   latestTotalTokens?: number;
   maxInputTokens?: number;
   showLoginHint?: boolean;
+  /**
+   * 一次性中性提示（插件变更待应用 / 重载完成）。由宿主显式设置并在数秒后清除，
+   * 不提供持久可见标识（docs/specs/ecosystem/plugin.md「插件变更提示」）。
+   */
+  pluginHint?: string | null;
 }
 
 export const Notifications: React.FC<NotificationsProps> = ({
   latestTotalTokens = 0,
   maxInputTokens = 200000,
   showLoginHint = false,
+  pluginHint = null,
 }) => {
   const percentage =
     latestTotalTokens > 0
@@ -22,6 +28,7 @@ export const Notifications: React.FC<NotificationsProps> = ({
 
   return (
     <Box gap={1}>
+      {pluginHint && <Text color="gray">{pluginHint}</Text>}
       {showLoginHint && <Text color="gray">Type /login to authenticate</Text>}
       {percentage > 0 && (
         <Text color={contextColor}>{percentage}% context</Text>