@stigmer/react 1.0.4 → 2.0.1

package/src/workflow/waterfall/WaterfallScale.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { WaterfallScale as WaterfallScaleData } from "../execution/derive-waterfall-entries";
+import { formatDuration } from "../format-utils";
+
+export interface WaterfallScaleProps {
+  readonly scale: WaterfallScaleData;
+  readonly className?: string;
+}
+
+/**
+ * Time axis for the waterfall timeline.
+ *
+ * Renders tick marks with duration labels at computed intervals.
+ * Labels adapt density based on the scale's `labelEveryN` to
+ * prevent overlapping text on dense scales.
+ */
+export const WaterfallScaleComponent = memo(function WaterfallScaleComponent({
+  scale,
+  className,
+}: WaterfallScaleProps) {
+  if (scale.ticks.length === 0) return null;
+
+  return (
+    <div
+      className={cn("relative h-5 shrink-0 select-none border-b border-[var(--stgm-border,#e5e5e5)]", className)}
+      aria-hidden="true"
+    >
+      {scale.ticks.map((tickMs, i) => {
+        const pct = (tickMs / scale.totalMs) * 100;
+        const showLabel = i % scale.labelEveryN === 0;
+
+        return (
+          <div
+            key={tickMs}
+            className="absolute top-0 h-full"
+            style={{ left: `${pct}%` }}
+          >
+            <div className="h-1.5 w-px bg-[var(--stgm-border,#e5e5e5)]" />
+            {showLabel && (
+              <span className="absolute top-1.5 -translate-x-1/2 whitespace-nowrap text-[9px] tabular-nums text-[var(--stgm-muted-foreground,#737373)]">
+                {formatDuration(tickMs)}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/workflow/waterfall/WaterfallTimeline.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { memo, useCallback, useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import type { WorkflowExecutionEvent } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/event_pb";
+import type { WorkflowEventStreamState } from "../../internal/store/workflow-execution-event-store";
+import { useWaterfallEntries } from "../execution/useWaterfallEntries";
+import { WaterfallScaleComponent } from "./WaterfallScale";
+import { WaterfallRow } from "./WaterfallRow";
+
+/** Props for {@link WaterfallTimeline}. */
+export interface WaterfallTimelineProps {
+  /** Events ordered by sequence_number ascending. */
+  readonly events: readonly WorkflowExecutionEvent[];
+  /** Current stream lifecycle state. */
+  readonly streamState: WorkflowEventStreamState;
+  /** ISO 8601 timestamp of execution start (from `execution_started.occurred_at` or `status.started_at`). */
+  readonly executionStartIso: string;
+  /** Total execution duration in ms (for completed executions). */
+  readonly executionDurationMs?: number;
+  /** Currently selected task name (synced with graph and inspector). */
+  readonly selectedTaskName?: string | null;
+  /** Called when the user clicks a task bar. */
+  readonly onTaskSelect?: (taskName: string) => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * Execution waterfall timeline — horizontal bars showing task durations
+ * against a time axis.
+ *
+ * Designed as an SDK component (DD-001): no Console or Desktop
+ * dependencies. Receives events from the parent `WorkflowExecutionViewer`
+ * (single subscription owner per DD-009).
+ *
+ * Selection is bidirectional: clicking a bar calls `onTaskSelect`;
+ * changing `selectedTaskName` externally scrolls the waterfall to
+ * that task's row.
+ *
+ * @example
+ * ```tsx
+ * <WaterfallTimeline
+ *   events={events}
+ *   streamState={streamState}
+ *   executionStartIso={execution.status.startedAt}
+ *   selectedTaskName={selectedTask}
+ *   onTaskSelect={setSelectedTask}
+ * />
+ * ```
+ *
+ * @since T07
+ */
+export const WaterfallTimeline = memo(function WaterfallTimeline({
+  events,
+  streamState,
+  executionStartIso,
+  executionDurationMs,
+  selectedTaskName,
+  onTaskSelect,
+  className,
+}: WaterfallTimelineProps) {
+  const { entries, scale, isLive, nowMs } = useWaterfallEntries({
+    events,
+    streamState,
+    executionStartIso,
+    executionDurationMs,
+  });
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const handleSelect = useCallback(
+    (taskName: string) => {
+      onTaskSelect?.(taskName);
+    },
+    [onTaskSelect],
+  );
+
+  // Scroll to selected task when selectedTaskName changes externally
+  useEffect(() => {
+    if (!selectedTaskName || !scrollRef.current) return;
+    const row = scrollRef.current.querySelector(
+      `[data-task-name="${CSS.escape(selectedTaskName)}"]`,
+    );
+    if (row) {
+      row.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedTaskName]);
+
+  // Empty state
+  if (entries.length === 0) {
+    const isConnecting = streamState.stage === "connecting";
+    return (
+      <div className={cn("flex items-center justify-center text-xs text-[var(--stgm-muted-foreground,#737373)]", className)}>
+        {isConnecting ? "Loading timeline…" : "No task data available"}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col overflow-hidden", className)} role="list" aria-label="Execution waterfall">
+      {/* Time axis header */}
+      <div className="flex shrink-0 items-center">
+        {/* Spacer for label+duration+cost columns */}
+        <div className="w-[248px] shrink-0" />
+        <div className="min-w-0 flex-1">
+          <WaterfallScaleComponent scale={scale} />
+        </div>
+      </div>
+
+      {/* Scrollable task rows */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        {entries.map((entry) => (
+          <WaterfallRow
+            key={entry.taskName}
+            entry={entry}
+            totalMs={scale.totalMs}
+            nowMs={nowMs}
+            isSelected={entry.taskName === selectedTaskName}
+            onSelect={handleSelect}
+          />
+        ))}
+
+        {/* Live indicator */}
+        {isLive && (
+          <div className="flex items-center gap-2 px-2 py-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+            <span className="relative flex size-1.5">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-[var(--stgm-success,#22c55e)] opacity-75" />
+              <span className="relative inline-flex size-1.5 rounded-full bg-[var(--stgm-success,#22c55e)]" />
+            </span>
+            Live
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/workflow/waterfall/WaterfallTooltip.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@stigmer/theme";
+import type { WaterfallEntry } from "../execution/derive-waterfall-entries";
+import { formatDuration, formatMicroUsd, formatTokenCount } from "../format-utils";
+
+export interface WaterfallTooltipProps {
+  readonly entry: WaterfallEntry;
+  readonly nowMs: number;
+  readonly className?: string;
+}
+
+const BIGINT_ZERO = BigInt(0);
+
+/**
+ * Tooltip content for a waterfall bar hover.
+ *
+ * Shows task name, kind, status, duration, cost, and tokens in a
+ * compact layout. Designed to be placed in a popover/tooltip container
+ * by the parent component.
+ */
+export const WaterfallTooltip = memo(function WaterfallTooltip({
+  entry,
+  nowMs,
+  className,
+}: WaterfallTooltipProps) {
+  const effectiveDuration = entry.endMs != null
+    ? entry.endMs - entry.startMs
+    : nowMs - entry.startMs;
+
+  return (
+    <div className={cn("space-y-1 text-[11px]", className)}>
+      <div className="font-medium text-[var(--stgm-popover-foreground,#171717)]">
+        {entry.taskName}
+      </div>
+
+      <div className="text-[var(--stgm-muted-foreground,#737373)]">
+        {entry.status}
+        {entry.attempts.length > 1 && ` (${entry.attempts.length} attempts)`}
+      </div>
+
+      {entry.status !== "skipped" && entry.status !== "not_reached" && (
+        <div className="tabular-nums text-[var(--stgm-popover-foreground,#171717)]">
+          {formatDuration(entry.durationMs || effectiveDuration)}
+        </div>
+      )}
+
+      {entry.costMicros > BIGINT_ZERO && (
+        <div className="tabular-nums text-[var(--stgm-popover-foreground,#171717)]">
+          {formatMicroUsd(entry.costMicros)}
+        </div>
+      )}
+
+      {entry.tokensUsed > BIGINT_ZERO && (
+        <div className="tabular-nums text-[var(--stgm-popover-foreground,#171717)]">
+          {formatTokenCount(entry.tokensUsed)} tokens
+        </div>
+      )}
+
+      {entry.approvalWaitMs != null && entry.approvalWaitMs > 0 && (
+        <div className="text-[var(--stgm-warning,#f59e0b)]">
+          Approval wait: {formatDuration(entry.approvalWaitMs)}
+        </div>
+      )}
+
+      {entry.children.length > 0 && (
+        <div className="text-[var(--stgm-muted-foreground,#737373)]">
+          {entry.children.length} agent call{entry.children.length > 1 ? "s" : ""}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/workflow/waterfall/index.ts

@@ -0,0 +1,5 @@
+export { WaterfallTimeline, type WaterfallTimelineProps } from "./WaterfallTimeline";
+export { WaterfallRow, type WaterfallRowProps } from "./WaterfallRow";
+export { WaterfallBar, type WaterfallBarProps } from "./WaterfallBar";
+export { WaterfallScaleComponent, type WaterfallScaleProps } from "./WaterfallScale";
+export { WaterfallTooltip, type WaterfallTooltipProps } from "./WaterfallTooltip";

package/src/workflow/workflow-graph-conversions.ts

@@ -19,7 +19,8 @@ import type {
   WorkflowGraphEnvVar,
 } from "./workflow-graph-model";
 import { START_NODE_ID, END_NODE_ID } from "./workflow-graph-model";
-import { CANVAS_NODE_WIDTH, CANVAS_NODE_HEIGHT, SENTINEL_NODE_WIDTH, SENTINEL_NODE_HEIGHT } from "./canvas-constants";
+import { categorizeKind, kindToDisplayName } from "./kind-metadata";
+import { getVisualSpec, type VisualClass } from "./task-type-visual-registry";
 
 // ---------------------------------------------------------------------------
 // React Flow node/edge type identifiers
@@ -29,25 +30,11 @@ export const CANVAS_TASK_NODE_TYPE = "canvasTask" as const;
 export const CANVAS_TRANSITION_EDGE_TYPE = "canvasTransition" as const;
 
 // ---------------------------------------------------------------------------
-// Category classification (mirrors useWorkflowTopology)
+// Re-export categorizeKind from the canonical module for backward compatibility.
+// Callers that previously imported from this file continue to work.
 // ---------------------------------------------------------------------------
 
-const AI_KINDS = new Set(["agent_call", "llm_call", "eval"]);
-const CONTROL_FLOW_KINDS = new Set(["switch_case", "for_each", "fork", "try_catch"]);
-const INVOCATION_KINDS = new Set(["http_call", "grpc_call", "activity_call", "run_workflow"]);
-const DATA_KINDS = new Set(["set_vars", "transform"]);
-const GOVERNANCE_KINDS = new Set(["human_input", "validate"]);
-const EVENT_KINDS = new Set(["listen", "wait", "emit_event", "notification", "raise_error"]);
-
-export function categorizeKind(kind: string): TopologyNodeCategory {
-  if (AI_KINDS.has(kind)) return "ai";
-  if (CONTROL_FLOW_KINDS.has(kind)) return "control_flow";
-  if (INVOCATION_KINDS.has(kind)) return "invocation";
-  if (DATA_KINDS.has(kind)) return "data";
-  if (GOVERNANCE_KINDS.has(kind)) return "governance";
-  if (EVENT_KINDS.has(kind)) return "event";
-  return "unspecified";
-}
+export { categorizeKind } from "./kind-metadata";
 
 // ---------------------------------------------------------------------------
 // Enum maps (reuse the same logic as serialize-workflow-yaml.ts)
@@ -454,21 +441,61 @@ export function graphToWorkflowInput(
 // toReactFlowElements
 // ---------------------------------------------------------------------------
 
+/**
+ * Execution status for a single node in the execution graph.
+ * Derived from `DerivedTaskState` in the event store, plus a synthetic
+ * `"not_reached"` value for nodes the execution has not touched.
+ */
+export type NodeExecutionStatus =
+  | "not_reached"
+  | "pending"
+  | "running"
+  | "completed"
+  | "failed"
+  | "skipped"
+  | "retrying"
+  | "waiting_approval";
+
+/** Per-node execution state attached to canvas nodes in execution mode. */
+export interface NodeExecutionState {
+  readonly status: NodeExecutionStatus;
+  readonly durationMs?: number;
+  readonly costMicros?: bigint;
+  readonly attemptNumber?: number;
+  readonly error?: string;
+}
+
 /** Data payload attached to canvas task nodes. */
 export interface CanvasTaskNodeData extends Record<string, unknown> {
   taskName: string;
   kind: WorkflowTaskKind;
   kindString: string;
   category: TopologyNodeCategory;
+  visualClass: VisualClass;
+  displayName: string;
+  ariaShapeLabel: string;
   config: JsonObject;
   exportAs?: string;
   isSentinel: boolean;
   errorCount?: number;
+  executionState?: NodeExecutionState;
+  /** Fork branch completion progress (T06). Present only for fork nodes in execution mode. */
+  forkProgress?: { readonly completed: number; readonly total: number; readonly compete: boolean };
+  /** Tool name awaiting approval. Present when status is waiting_approval and a tool name is known. */
+  approvalToolName?: string;
+  /** Live agent activity summary. Present on running agent_call nodes when progress events arrive. */
+  agentActivity?: { readonly agentSlug: string; readonly currentToolName: string; readonly messagesCount: number; readonly toolCallsCount: number };
+  /** Diff state (T14). Present only in diff mode. */
+  diffState?: { readonly status: import("./diff/types").NodeDiffStatus; readonly changedFields?: readonly string[] };
 }
 
 /** Data payload attached to canvas transition edges. */
 export interface CanvasTransitionEdgeData extends Record<string, unknown> {
   label?: string;
+  /** Edge execution state (T06). Present only in execution mode. */
+  executionState?: import("./execution").EdgeExecutionState;
+  /** Edge diff state (T14). Present only in diff mode. */
+  diffState?: import("./diff/types").EdgeDiffStatus;
 }
 
 /**
@@ -484,6 +511,8 @@ export function toReactFlowElements(graph: WorkflowGraphModel): {
 } {
   const nodes: Node[] = graph.nodes.map((node) => {
     const isSentinel = node.id === START_NODE_ID || node.id === END_NODE_ID;
+    const kindString = taskKindToString(node.kind);
+    const visualSpec = getVisualSpec(isSentinel ? node.id : kindString);
     return {
       id: node.id,
       type: CANVAS_TASK_NODE_TYPE,
@@ -491,14 +520,17 @@ export function toReactFlowElements(graph: WorkflowGraphModel): {
       data: {
         taskName: node.taskName,
         kind: node.kind,
-        kindString: taskKindToString(node.kind),
+        kindString,
         category: node.category,
+        visualClass: visualSpec.visualClass,
+        displayName: isSentinel ? node.taskName : kindToDisplayName(kindString),
+        ariaShapeLabel: visualSpec.ariaShapeLabel,
         config: node.config,
         exportAs: node.export?.as,
         isSentinel,
-      },
-      width: isSentinel ? SENTINEL_NODE_WIDTH : CANVAS_NODE_WIDTH,
-      height: isSentinel ? SENTINEL_NODE_HEIGHT : CANVAS_NODE_HEIGHT,
+      } satisfies Omit<CanvasTaskNodeData, "errorCount">,
+      width: visualSpec.defaultWidth,
+      height: visualSpec.defaultHeight,
       draggable: !isSentinel,
       selectable: !isSentinel,
       deletable: !isSentinel,

package/src/workflow/workflow-uses-trigger-input.ts

@@ -0,0 +1,58 @@
+import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
+
+/**
+ * Patterns that indicate a workflow references the trigger message input.
+ *
+ * - `$input` — runtime expression referencing parsed trigger_message
+ * - `workflow.input.trigger_message` — documentation-style template reference
+ */
+const TRIGGER_INPUT_PATTERNS = [
+  "$input",
+  "workflow.input.trigger_message",
+] as const;
+
+/**
+ * Determines whether a workflow references the trigger message input (`$input`)
+ * anywhere in its task configurations.
+ *
+ * Deep-scans all `taskConfig` Struct values for string fields containing
+ * known trigger-input patterns. Returns `true` if any task references
+ * the trigger input, meaning the "Trigger Input" field should be shown
+ * in the run dialog.
+ *
+ * This is a pure function safe to memoize at the call site.
+ */
+export function workflowUsesTriggerInput(workflow: Workflow): boolean {
+  const tasks = workflow.spec?.tasks;
+  if (!tasks || tasks.length === 0) return false;
+
+  for (const task of tasks) {
+    if (structContainsTriggerRef(task.taskConfig)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Recursively walks a Struct/object value looking for string leaves
+ * that contain any of the trigger input patterns.
+ */
+function structContainsTriggerRef(value: unknown): boolean {
+  if (value === null || value === undefined) return false;
+
+  if (typeof value === "string") {
+    return TRIGGER_INPUT_PATTERNS.some((pattern) => value.includes(pattern));
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(structContainsTriggerRef);
+  }
+
+  if (typeof value === "object") {
+    return Object.values(value).some(structContainsTriggerRef);
+  }
+
+  return false;
+}

package/src/workspace/WorkspaceEditor.tsx

@@ -4,10 +4,11 @@ import { useState, useCallback, useEffect, type KeyboardEvent } from "react";
 import type { UseWorkspaceEntriesReturn } from "./useWorkspaceEntries";
 import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection";
 import { GitHubRepoPicker } from "../github/GitHubRepoPicker";
-import { RunnerFileBrowser } from "../runner/RunnerFileBrowser";
 import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
 
+type ActivePanel = "github" | null;
+
 /** Props for {@link WorkspaceEditor}. */
 export interface WorkspaceEditorProps {
   /** Workspace state from {@link useWorkspaceEntries}. */
@@ -20,43 +21,26 @@ export interface WorkspaceEditorProps {
   readonly gitHubConnection?: UseGitHubConnectionReturn;
   /** Enable the "Connect GitHub" action. Default: true. */
   readonly enableGitHub?: boolean;
-  /**
-   * Enable the "Browse Folder" action.
-   *
-   * The action is only functional when `runnerId` is also provided,
-   * since the file browser requires a connected runner to query.
-   * When `runnerId` is null (Auto selected), the action is disabled.
-   */
+  /** Enable the "Browse Folder" action. */
   readonly enableLocal?: boolean;
-  /**
-   * ID of the runner to use for filesystem browsing.
-   *
-   * When provided together with `enableLocal`, the "Browse Folder"
-   * action drills into a {@link RunnerFileBrowser} that queries the
-   * runner's filesystem via the `ListDirectory` command.
-   */
-  readonly runnerId?: string | null;
   /**
    * Native folder picker callback for desktop environments.
    *
-   * When provided alongside `runnerId`, renders an "Open system dialog"
-   * button in the Browse Folder drill-in view. Desktop-only enhancement.
+   * When provided alongside `enableLocal`, renders a "Browse Folder"
+   * button that opens the system folder dialog. Desktop-only enhancement.
    */
   readonly onBrowseLocalFolder?: () => Promise<string | null>;
   /**
-   * Display name of the currently selected runner.
-   * Passed through to {@link RunnerFileBrowser} for the context header.
-   */
-  readonly runnerName?: string;
-  /**
-   * Hostname of the runner's machine (e.g. "Alice's MacBook Pro").
-   * Passed through to {@link RunnerFileBrowser} for the context header.
+   * When set, the editor starts with this panel active instead of the
+   * default action-list view. Used to skip the intermediate menu when
+   * only one source type is available and entries are empty.
+   *
+   * Ignored when `workspace.entries.length > 0` (the entry list takes
+   * precedence as the default view in that case).
    */
-  readonly runnerHostname?: string;
+  readonly initialPanel?: ActivePanel;
 }
 
-type ActivePanel = "browse" | "github" | null;
-
 const TYPE_LABELS: Record<string, string> = {
   git: "GitHub",
 };
@@ -87,7 +71,6 @@ const TYPE_LABELS: Record<string, string> = {
  *       gitHubConnection={gh}
  *       enableGitHub
  *       enableLocal
- *       runnerId={browseRunnerId}
  *     />
  *   );
  * }
@@ -100,17 +83,25 @@ export function WorkspaceEditor({
   gitHubConnection,
   enableGitHub = true,
   enableLocal = false,
-  runnerId,
   onBrowseLocalFolder,
-  runnerName,
-  runnerHostname,
+  initialPanel,
 }: WorkspaceEditorProps) {
-  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+  const resolvedInitial =
+    initialPanel && workspace.entries.length === 0 ? initialPanel : null;
+  const [activePanel, setActivePanel] = useState<ActivePanel>(resolvedInitial);
   const [manualUrl, setManualUrl] = useState("");
   const [manualBranch, setManualBranch] = useState("");
   const entryList = useScrollShadows();
 
-  const canBrowse = enableLocal && !!runnerId;
+  useEffect(() => {
+    if (initialPanel && workspace.entries.length === 0) {
+      setActivePanel(initialPanel);
+    } else if (workspace.entries.length > 0) {
+      setActivePanel(null);
+    }
+  }, [initialPanel, workspace.entries.length]);
+
+  const canBrowse = enableLocal;
 
   const handleGitHubSelect = useCallback(
     (repoUrl: string, branch: string) => {
@@ -139,37 +130,6 @@ export function WorkspaceEditor({
 
   const goBack = useCallback(() => setActivePanel(null), []);
 
-  // ---------------------------------------------------------------------------
-  // Drill-in: Browse Folder
-  // ---------------------------------------------------------------------------
-
-  if (activePanel === "browse" && canBrowse) {
-    return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
-        <button
-          type="button"
-          onClick={goBack}
-          className="inline-flex items-center gap-1 text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ChevronLeftIcon />
-          Back
-        </button>
-        <div className="space-y-2">
-          <RunnerFileBrowser
-            runnerId={runnerId!}
-            onSelect={(path) => {
-              workspace.addLocalPath(path);
-              setActivePanel(null);
-            }}
-            onCancel={goBack}
-            runnerName={runnerName}
-            runnerHostname={runnerHostname}
-          />
-        </div>
-      </div>
-    );
-  }
-
   // ---------------------------------------------------------------------------
   // Drill-in: Connect GitHub
   // ---------------------------------------------------------------------------
@@ -269,23 +229,18 @@ export function WorkspaceEditor({
 
       {/* Action items */}
       <div className="space-y-0.5">
-        {canBrowse && (
+        {canBrowse && onBrowseLocalFolder && (
           <button
             type="button"
-            onClick={
-              onBrowseLocalFolder
-                ? async () => {
-                    const path = await onBrowseLocalFolder();
-                    if (path) workspace.addLocalPath(path);
-                  }
-                : () => setActivePanel("browse")
-            }
+            onClick={async () => {
+              const path = await onBrowseLocalFolder();
+              if (path) workspace.addLocalPath(path);
+            }}
             disabled={disabled}
             className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover disabled:pointer-events-none disabled:opacity-40"
           >
             <FolderIcon />
             <span className="flex-1 text-left">Browse Folder</span>
-            {!onBrowseLocalFolder && <ChevronRightIcon />}
           </button>
         )}
         {enableGitHub && (