@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

package/packages/core/src/public/components/ToolCallBlock.tsx

@@ -0,0 +1,252 @@
+/**
+ * ToolCallBlock Component
+ *
+ * Displays tool use and result in a distinct block.
+ * Story MSSCI-12698 - MessageView Component with Streaming
+ * Story MSSCI-13398 - Collapsible tool result display
+ * Story MSSCI-13402 - Tool use visual design polish
+ */
+
+import React, { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { getToolTypeClass } from '../utils/toolTypeColors.js';
+import { formatDuration } from '../utils/formatDuration.js';
+import { generateToolIntentSummary } from '../utils/toolIntentSummarizer.js';
+
+interface ToolUseMessage {
+  type: 'tool_use';
+  tool_name: string;
+  tool_id: string;
+  input: Record<string, unknown>;
+  timestamp: number;
+}
+
+interface ToolResultMessage {
+  type: 'tool_result';
+  tool_id: string;
+  content: string;
+  timestamp: number;
+  /** Whether this result represents an error */
+  is_error?: boolean;
+  /** Duration in milliseconds */
+  durationMs?: number;
+}
+
+interface ToolCallBlockProps {
+  toolUse: ToolUseMessage;
+  result?: ToolResultMessage;
+  className?: string;
+}
+
+const TRUNCATION_THRESHOLD = 50;
+
+/**
+ * Count lines in content, handling both Unix and Windows line endings
+ */
+function countLines(content: string): number {
+  if (!content) return 0;
+  // Normalize CRLF to LF, then count
+  const normalized = content.replace(/\r\n/g, '\n');
+  return normalized.split('\n').length;
+}
+
+/**
+ * Get truncated content (first N lines)
+ */
+function getTruncatedContent(content: string, maxLines: number): string {
+  const normalized = content.replace(/\r\n/g, '\n');
+  const lines = normalized.split('\n');
+  return lines.slice(0, maxLines).join('\n');
+}
+
+function formatToolInput(toolName: string, input: Record<string, unknown>): string {
+  // Display the most relevant input field based on tool type
+  if (toolName === 'Read' && input.file_path) {
+    return String(input.file_path);
+  }
+  if (toolName === 'Bash' && input.command) {
+    return String(input.command);
+  }
+  if (toolName === 'Glob' && input.pattern) {
+    return String(input.pattern);
+  }
+  if (toolName === 'Grep' && input.pattern) {
+    return String(input.pattern);
+  }
+  if (toolName === 'Write' && input.file_path) {
+    return String(input.file_path);
+  }
+  // Default: show JSON
+  return JSON.stringify(input, null, 2);
+}
+
+/**
+ * Get single-letter badge label for tool type
+ */
+export function getToolBadgeLabel(toolName: string): string {
+  const labels: Record<string, string> = {
+    Read: 'R',
+    Write: 'W',
+    Bash: 'B',
+    Glob: 'G',
+    Grep: 'S',  // S for Search
+    Edit: 'E',
+    Task: 'T',
+    WebFetch: 'F',
+    WebSearch: 'W',
+    TodoWrite: 'D',  // D for Do/Tasks
+  };
+  return labels[toolName] || toolName.charAt(0).toUpperCase();
+}
+
+export default function ToolCallBlock({ toolUse, result, className }: ToolCallBlockProps): React.ReactElement {
+  // AC1: Start collapsed by default
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isPromptCollapsed, setIsPromptCollapsed] = useState(true);
+  // AC3: Track whether showing full content or truncated
+  const [showFullContent, setShowFullContent] = useState(false);
+  // AC4: Track copy state
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
+
+  // MSSCI-13402: Determine error state for styling
+  const isError = result?.is_error === true;
+  const inputDisplay = formatToolInput(toolUse.tool_name, toolUse.input);
+  const paramCount = Object.keys(toolUse.input).length;
+
+  // MSSCI-13402: Get tool type CSS class
+  const toolTypeClass = getToolTypeClass(toolUse.tool_name);
+
+  // Generate human-readable intent summary (Story 74-1)
+  const intentSummary = useMemo(() => {
+    return generateToolIntentSummary(toolUse.tool_name, toolUse.input);
+  }, [toolUse.tool_name, toolUse.input]);
+
+  // AC2: Memoize line count for performance
+  const lineCount = useMemo(() => {
+    return result ? countLines(result.content) : 0;
+  }, [result?.content]);
+
+  // AC3: Determine if truncation applies
+  const shouldTruncate = lineCount > TRUNCATION_THRESHOLD;
+  const isTruncated = shouldTruncate && !showFullContent;
+
+  // AC3: Get display content (truncated or full)
+  const displayContent = useMemo(() => {
+    if (!result) return '';
+    if (isTruncated) {
+      return getTruncatedContent(result.content, TRUNCATION_THRESHOLD);
+    }
+    return result.content;
+  }, [result?.content, isTruncated]);
+
+  // AC4: Handle copy to clipboard
+  const handleCopy = async () => {
+    if (!result) return;
+    try {
+      await navigator.clipboard.writeText(result.content);
+      setCopyState('copied');
+      setTimeout(() => setCopyState('idle'), 2000);
+    } catch {
+      setCopyState('error');
+    }
+  };
+
+  // AC2: Format line count text
+  const lineCountText = lineCount === 1 ? '1 line' : `${lineCount} lines`;
+
+  // MSSCI-13402: Build class list with tool type and error state
+  const blockClasses = [
+    'tool-call-block',
+    toolTypeClass,
+    isError ? 'tool-error' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  // Get badge label for tool type
+  const badgeLabel = getToolBadgeLabel(toolUse.tool_name);
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div data-testid="tool-call-block" className={blockClasses}>
+        <div className="tool-header">
+          {/* Tool type badge - colored pill for instant recognition */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="default" className="tool-type-badge">
+                {badgeLabel}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent>{toolUse.tool_name}</TooltipContent>
+          </Tooltip>
+          <span className="tool-name">{intentSummary}</span>
+          {/* MSSCI-13402: Duration display */}
+          <span data-testid="tool-duration" className="tool-duration">
+            {result?.durationMs !== undefined ? formatDuration(result.durationMs) : ''}
+          </span>
+        </div>
+      {/* Prompt section - collapsible tool input display */}
+      <div className="tool-result-header">
+        <Button
+          variant="ghost"
+          size="sm"
+          data-testid="tool-prompt-toggle"
+          className="tool-result-toggle"
+          onClick={() => setIsPromptCollapsed(!isPromptCollapsed)}
+        >
+          {isPromptCollapsed ? '▶' : '▼'} Prompt ({paramCount} {paramCount === 1 ? 'param' : 'params'})
+        </Button>
+      </div>
+      <div
+        data-testid="tool-prompt-content"
+        className={`tool-result-content ${isPromptCollapsed ? 'collapsed' : ''}`}
+      >
+        <pre>{inputDisplay}</pre>
+      </div>
+      {result && (
+        <>
+          <div className="tool-result-header">
+            <Button
+              variant="ghost"
+              size="sm"
+              data-testid="tool-result-toggle"
+              className="tool-result-toggle"
+              onClick={() => setIsCollapsed(!isCollapsed)}
+            >
+              {isCollapsed ? '▶' : '▼'} Result ({lineCountText})
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              data-testid="tool-result-copy"
+              className={`tool-result-copy ${copyState === 'copied' ? 'copied' : ''} ${copyState === 'error' ? 'copy-error' : ''}`}
+              onClick={handleCopy}
+              aria-label="Copy result to clipboard"
+            >
+              {copyState === 'copied' ? '✓' : '📋'}
+            </Button>
+          </div>
+          <div
+            data-testid="tool-result-content"
+            className={`tool-result-content ${isCollapsed ? 'collapsed' : ''} ${isTruncated && !isCollapsed ? 'truncated' : ''} ${isError ? 'error-content' : ''}`}
+          >
+            <pre>{displayContent}</pre>
+            {shouldTruncate && !isCollapsed && isTruncated && (
+              <Button
+                variant="link"
+                size="sm"
+                data-testid="tool-result-expand"
+                className="tool-result-expand"
+                onClick={() => setShowFullContent(true)}
+              >
+                Show all ({lineCount} lines)
+              </Button>
+            )}
+          </div>
+        </>
+      )}
+      </div>
+    </TooltipProvider>
+  );
+}

package/packages/core/src/public/components/ToolStack.tsx

@@ -0,0 +1,209 @@
+/**
+ * ToolStack Component
+ *
+ * Collapsible container for consecutive tool use groups.
+ * Story MSSCI-13400 - Tool use stack between messages
+ */
+
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import ToolCallBlock, { getToolBadgeLabel } from './ToolCallBlock';
+import type { ToolStackData } from '../utils/toolStackGrouper';
+import { generateToolIntentSummary } from '../utils/toolIntentSummarizer';
+import { formatDuration } from '../utils/formatDuration';
+
+interface ToolResultMessage {
+  type: 'tool_result';
+  tool_id: string;
+  content: string;
+  timestamp: number;
+  durationMs?: number;
+}
+
+interface ToolStackProps {
+  stack: ToolStackData;
+  toolResults: Map<string, ToolResultMessage>;
+}
+
+export default function ToolStack({ stack, toolResults }: ToolStackProps): React.ReactElement {
+  // AC4: Expand automatically when stack has active (pending) tool
+  const [isCollapsed, setIsCollapsed] = useState(!stack.isActive);
+
+  // Track previous isActive to detect transitions
+  const prevIsActiveRef = useRef(stack.isActive);
+
+  // When stack transitions from active to inactive, keep it expanded
+  // This ensures completed tools remain visible for user review
+  useEffect(() => {
+    if (prevIsActiveRef.current && !stack.isActive) {
+      // Stack just completed - keep expanded for review
+      setIsCollapsed(false);
+    }
+    prevIsActiveRef.current = stack.isActive;
+  }, [stack.isActive]);
+
+  // Count display - just the number
+  const countText = `${stack.count}`;
+
+  // Active tool summary - show what's happening RIGHT NOW
+  const activeSummary = useMemo(() => {
+    if (stack.isActive && stack.tools.length > 0) {
+      // Show the most recent (last) tool's summary
+      const lastTool = stack.tools[stack.tools.length - 1];
+      return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
+    }
+    return null;
+  }, [stack.tools, stack.isActive]);
+
+  // Generate summary of tool intents for collapsed view
+  const collapsedSummary = useMemo(() => {
+    // Show last tool's summary as the main description
+    if (stack.tools.length === 0) return '';
+    const lastTool = stack.tools[stack.tools.length - 1];
+    return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
+  }, [stack.tools]);
+
+  // Compute tool type counts for mini badges
+  const toolTypeCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    stack.tools.forEach(tool => {
+      const count = counts.get(tool.tool_name) || 0;
+      counts.set(tool.tool_name, count + 1);
+    });
+    return counts;
+  }, [stack.tools]);
+
+  // Total duration across all tools in stack
+  const totalDuration = useMemo(() => {
+    return stack.tools.reduce((sum, tool) => {
+      const result = toolResults.get(tool.tool_id);
+      return sum + (result?.durationMs || 0);
+    }, 0);
+  }, [stack.tools, toolResults]);
+
+  // AC4: Determine which tool is current (pending)
+  const getToolClass = (toolIndex: number): string => {
+    const tool = stack.tools[toolIndex];
+    const result = toolResults.get(tool.tool_id);
+
+    // If stack is active, last tool without result is current
+    if (stack.isActive) {
+      const isLastTool = toolIndex === stack.tools.length - 1;
+      const hasPendingResult = !result;
+
+      if (isLastTool && hasPendingResult) {
+        return 'tool-current';
+      }
+      return 'tool-historical';
+    }
+
+    // If stack is not active, all tools are historical
+    return 'tool-historical';
+  };
+
+  // Toggle collapse state
+  const handleToggle = useCallback(() => {
+    setIsCollapsed(prev => !prev);
+  }, []);
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggle();
+    }
+  }, [handleToggle]);
+
+  // AC4: When active and user tries to collapse, still show current tool
+  const shouldShowTools = !isCollapsed || stack.isActive;
+
+  return (
+    <div
+      data-testid="tool-stack"
+      data-collapsible="true"
+      className={`tool-stack ${isCollapsed && !stack.isActive ? 'collapsed' : ''}`}
+    >
+      <div
+        data-testid="tool-stack-header"
+        className="tool-stack-header"
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-expanded={!isCollapsed || stack.isActive}
+        aria-label={`Tool stack with ${countText}: ${collapsedSummary}`}
+      >
+        <span className="tool-stack-toggle">
+          {isCollapsed && !stack.isActive ? '▶' : '▼'}
+        </span>
+        <span
+          data-testid="tool-stack-count"
+          className="tool-stack-count-badge"
+        >
+          {countText}
+        </span>
+        {stack.isActive && activeSummary ? (
+          <span className="tool-stack-active-summary">
+            {activeSummary}
+          </span>
+        ) : (
+          <>
+            <span className="tool-stack-badges">
+              <TooltipProvider delayDuration={300}>
+                {Array.from(toolTypeCounts.entries()).slice(0, 4).map(([type, count]) => (
+                  <Tooltip key={type}>
+                    <TooltipTrigger asChild>
+                      <Badge
+                        variant="outline"
+                        className={`tool-mini-badge badge-${type.toLowerCase()}`}
+                      >
+                        {getToolBadgeLabel(type)}
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>{`${count} ${type} call${count > 1 ? 's' : ''}`}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </TooltipProvider>
+            </span>
+            <span className="tool-stack-summary">
+              {collapsedSummary}
+            </span>
+          </>
+        )}
+        <span className="tool-stack-duration">
+          {totalDuration > 0 ? formatDuration(totalDuration) : ''}
+        </span>
+      </div>
+
+      {shouldShowTools && (
+        <div className="tool-stack-content">
+          {stack.tools.map((tool, index) => {
+            const result = toolResults.get(tool.tool_id);
+            const toolClass = getToolClass(index);
+
+            return (
+              <ToolCallBlock
+                key={tool.tool_id || `tool-${index}`}
+                toolUse={{
+                  type: 'tool_use',
+                  tool_name: tool.tool_name,
+                  tool_id: tool.tool_id,
+                  input: tool.input,
+                  timestamp: tool.timestamp,
+                }}
+                result={result ? {
+                  type: 'tool_result',
+                  tool_id: result.tool_id,
+                  content: result.content,
+                  timestamp: result.timestamp,
+                } : undefined}
+                className={toolClass}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/core/src/public/components/ToolStatus.tsx

@@ -0,0 +1,57 @@
+/**
+ * ToolStatus Component
+ *
+ * Displays status indicator for tool execution state.
+ * Story MSSCI-13402 - Tool use visual design polish
+ */
+
+import React from 'react';
+
+export type ToolStatusType = 'pending' | 'success' | 'error';
+
+export interface ToolStatusProps {
+  status: ToolStatusType;
+}
+
+/**
+ * Status indicator component showing pending/success/error state
+ */
+export function ToolStatus({ status }: ToolStatusProps): React.ReactElement {
+  const getAriaLabel = (): string => {
+    switch (status) {
+      case 'pending':
+        return 'Tool running';
+      case 'success':
+        return 'Tool completed successfully';
+      case 'error':
+        return 'Tool failed with error';
+      default:
+        return 'Tool status unknown';
+    }
+  };
+
+  const getContent = (): React.ReactNode => {
+    switch (status) {
+      case 'pending':
+        return <span className="spinner" data-loading="true" />;
+      case 'success':
+        return '✓';
+      case 'error':
+        return '✗';
+      default:
+        return '?';
+    }
+  };
+
+  return (
+    <span
+      data-testid="tool-status-indicator"
+      className={`tool-status-indicator status-${status}`}
+      aria-label={getAriaLabel()}
+    >
+      {getContent()}
+    </span>
+  );
+}
+
+export default ToolStatus;

package/packages/core/src/public/components/dialogs/CodeMarkersDialog.tsx

@@ -0,0 +1,169 @@
+/**
+ * CodeMarkersDialog — Story 80-3 (MSSCI-14456)
+ *
+ * Dialog displaying code markers (TODO, FIXME, HACK, XXX) with tabs,
+ * sortable table, staleness badges, and summary stats.
+ */
+import React, { useState, useMemo, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ToolDialog } from './ToolDialog';
+import { useCodeMarkers } from '../../hooks/useCodeMarkers';
+
+export interface CodeMarkersDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type TabId = 'all' | 'stale' | 'deprecated';
+type SortField = 'marker_type' | 'path' | 'line' | 'author' | 'age_days';
+type SortDirection = 'asc' | 'desc';
+
+export function CodeMarkersDialog({ open, onOpenChange }: CodeMarkersDialogProps): React.ReactElement {
+  const { data, isLoading, error, refresh } = useCodeMarkers({ days: 90, repo: 'pennyfarthing' });
+
+  useEffect(() => {
+    if (open) refresh();
+  }, [open, refresh]);
+
+  const [activeTab, setActiveTab] = useState<TabId>('all');
+  const [sortField, setSortField] = useState<SortField>('age_days');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  const filteredMarkers = useMemo(() => {
+    if (!data?.markers) return [];
+    switch (activeTab) {
+      case 'stale':
+        return data.markers.filter((m) => m.is_stale);
+      case 'deprecated':
+        return [];
+      default:
+        return data.markers;
+    }
+  }, [data, activeTab]);
+
+  const sortedMarkers = useMemo(() => {
+    const sorted = [...filteredMarkers];
+    sorted.sort((a, b) => {
+      const aVal = a[sortField];
+      const bVal = b[sortField];
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      }
+      const aNum = Number(aVal);
+      const bNum = Number(bVal);
+      return sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+    });
+    return sorted;
+  }, [filteredMarkers, sortField, sortDirection]);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('desc');
+    }
+  };
+
+  const sortArrow = (field: SortField) => {
+    if (sortField !== field) return '';
+    return sortDirection === 'desc' ? ' v' : ' ^';
+  };
+
+  return (
+    <ToolDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Code Markers"
+      description="TODO, FIXME, HACK, and XXX markers across the codebase"
+    >
+      {isLoading && (
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-1/2" />
+        </div>
+      )}
+
+      {error && (
+        <div className="p-4 rounded border border-[var(--status-error)]/20 bg-[var(--status-error)]/5 text-[var(--status-error)] text-sm">
+          {error.message}
+        </div>
+      )}
+
+      {!isLoading && !error && data && (
+        <>
+          {/* Summary stats */}
+          <div className="flex gap-4 text-xs text-[var(--text-muted)]" data-testid="code-markers-summary">
+            <span data-testid="summary-total">Total: <span className="tabular-nums font-mono">{data.summary.total_markers}</span></span>
+            <span data-testid="summary-stale">Stale: <span className="tabular-nums font-mono">{data.summary.stale_markers}</span></span>
+            {Object.entries(data.summary.by_type).map(([type, count]) => (
+              <span key={type} data-testid={`summary-type-${type.toLowerCase()}`}>{type}: <span className="tabular-nums font-mono">{count}</span></span>
+            ))}
+          </div>
+
+          {/* Tabs */}
+          <div role="tablist" className="flex gap-4 border-b border-[var(--border)] mb-3">
+            {(['all', 'stale', 'deprecated'] as const).map((tab) => (
+              <button
+                key={tab}
+                role="tab"
+                aria-selected={activeTab === tab}
+                onClick={() => setActiveTab(tab)}
+                className={`pb-2 text-sm capitalize ${activeTab === tab ? 'border-b-2 border-[var(--accent)] text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]'}`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          {/* Table or empty state */}
+          {sortedMarkers.length === 0 ? (
+            <div className="text-center py-12 text-[var(--text-muted)]">No markers found</div>
+          ) : (
+            <table role="table" className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-[var(--border)]">
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('marker_type')}>
+                    Type{sortArrow('marker_type')}
+                  </th>
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('path')}>
+                    File{sortArrow('path')}
+                  </th>
+                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('line')}>
+                    Line{sortArrow('line')}
+                  </th>
+                  <th className="text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2">Text</th>
+                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('author')}>
+                    Author{sortArrow('author')}
+                  </th>
+                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('age_days')}>
+                    Age{sortArrow('age_days')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedMarkers.map((marker, i) => (
+                  <tr key={`${marker.path}:${marker.line}:${i}`} className="text-[var(--text-primary)]">
+                    <td className="py-1.5">
+                      <Badge variant={marker.is_stale ? 'destructive' : 'secondary'}>
+                        {marker.marker_type}
+                      </Badge>
+                    </td>
+                    <td className="py-1.5 font-mono text-xs">{marker.path}</td>
+                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.line}</td>
+                    <td className="py-1.5 truncate max-w-xs">{marker.text}</td>
+                    <td className="py-1.5">{marker.author}</td>
+                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.age_days}d</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </>
+      )}
+
+    </ToolDialog>
+  );
+}