@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/LogsToolbar.jsx

@@ -0,0 +1,193 @@
+import { colors, fonts } from '../theme';
+import { IconTrash, IconDownload, IconSearch } from '@tabler/icons-react';
+
+export default function LogsToolbar({
+  filter,
+  setFilter,
+  logType,
+  setLogType,
+  autoScroll,
+  setAutoScroll,
+  onClearLogs,
+  onExportLogs,
+  filteredCount,
+  totalCount,
+}) {
+  return (
+    <div
+      style={{
+        padding: '12px 16px',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        background: colors.bgCard,
+        display: 'flex',
+        gap: '10px',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        boxShadow: `0 1px 3px ${colors.shadowSm}`,
+      }}
+    >
+      <div style={{ position: 'relative', width: '300px' }}>
+        <IconSearch
+          size={16}
+          stroke={1.5}
+          style={{
+            position: 'absolute',
+            left: '12px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            color: colors.textTertiary,
+            pointerEvents: 'none',
+          }}
+        />
+        <input
+          type="text"
+          placeholder="Filter logs..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          style={{
+            padding: '8px 12px 8px 36px',
+            background: colors.bgCard,
+            border: `1px solid ${colors.borderLight}`,
+            color: colors.textPrimary,
+            fontSize: '13px',
+            fontFamily: fonts.body,
+            width: '100%',
+            borderRadius: '8px',
+            transition: 'all 0.2s',
+          }}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = colors.accentBlue;
+            e.currentTarget.style.boxShadow = `0 0 0 3px ${colors.accentBlue}20`;
+          }}
+          onBlur={(e) => {
+            e.currentTarget.style.borderColor = colors.borderLight;
+            e.currentTarget.style.boxShadow = 'none';
+          }}
+        />
+      </div>
+
+      <select
+        value={logType}
+        onChange={(e) => setLogType(e.target.value)}
+        style={{
+          padding: '8px 12px',
+          background: colors.bgCard,
+          border: `1px solid ${colors.borderLight}`,
+          color: colors.textPrimary,
+          fontSize: '13px',
+          fontFamily: fonts.body,
+          borderRadius: '8px',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = colors.accentBlue;
+          e.currentTarget.style.boxShadow = `0 0 0 3px ${colors.accentBlue}20`;
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
+        }}
+      >
+        <option value="all">All Types</option>
+        <option value="stdout">Stdout</option>
+        <option value="stderr">Stderr</option>
+        <option value="error">Errors</option>
+        <option value="exit">Exit</option>
+      </select>
+
+      <label
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          color: colors.textPrimary,
+          fontSize: '13px',
+          fontFamily: fonts.body,
+          cursor: 'pointer',
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={autoScroll}
+          onChange={(e) => setAutoScroll(e.target.checked)}
+          style={{ cursor: 'pointer' }}
+        />
+        Auto-scroll
+      </label>
+
+      <button
+        onClick={onClearLogs}
+        style={{
+          padding: '8px 14px',
+          background: colors.buttonDanger,
+          border: 'none',
+          color: colors.textInverse,
+          fontSize: '12px',
+          fontFamily: fonts.body,
+          fontWeight: '500',
+          cursor: 'pointer',
+          borderRadius: '8px',
+          transition: 'all 0.2s',
+          boxShadow: `0 2px 4px ${colors.shadowSm}`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.buttonDangerHover;
+          e.currentTarget.style.transform = 'translateY(-1px)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = colors.buttonDanger;
+          e.currentTarget.style.transform = 'translateY(0)';
+        }}
+      >
+        <IconTrash size={14} stroke={1.5} />
+        Clear Logs
+      </button>
+
+      <button
+        onClick={onExportLogs}
+        style={{
+          padding: '8px 14px',
+          background: colors.buttonPrimary,
+          border: 'none',
+          color: colors.textInverse,
+          fontSize: '12px',
+          fontFamily: fonts.body,
+          fontWeight: '500',
+          cursor: 'pointer',
+          borderRadius: '8px',
+          transition: 'all 0.2s',
+          boxShadow: `0 2px 4px ${colors.shadowSm}`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = colors.buttonPrimaryHover;
+          e.currentTarget.style.transform = 'translateY(-1px)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = colors.buttonPrimary;
+          e.currentTarget.style.transform = 'translateY(0)';
+        }}
+      >
+        <IconDownload size={14} stroke={1.5} />
+        Export Logs
+      </button>
+
+      <div
+        style={{
+          marginLeft: 'auto',
+          color: colors.textSecondary,
+          fontSize: '12px',
+          fontFamily: fonts.body,
+        }}
+      >
+        {filteredCount} / {totalCount} lines
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/LoadingModal.jsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react';
+import { colors, fonts } from '../../theme';
+import anime from 'animejs';
+
+export default function LoadingModal({ show }) {
+  const loadingModalRef = useRef(null);
+  const dotsRef = useRef([]);
+
+  useEffect(() => {
+    if (show && loadingModalRef.current) {
+      anime({
+        targets: loadingModalRef.current,
+        opacity: [0, 1],
+        scale: [0.9, 1],
+        duration: 400,
+        easing: 'easeOutExpo',
+      });
+
+      if (dotsRef.current.length > 0) {
+        anime({
+          targets: dotsRef.current,
+          translateY: [0, -10, 0],
+          duration: 1200,
+          delay: anime.stagger(200),
+          loop: true,
+          easing: 'easeInOutQuad',
+        });
+      }
+    } else if (!show && loadingModalRef.current) {
+      anime({
+        targets: loadingModalRef.current,
+        opacity: [1, 0],
+        scale: [1, 0.9],
+        duration: 300,
+        easing: 'easeInExpo',
+        complete: () => {
+          if (loadingModalRef.current) {
+            loadingModalRef.current.style.display = 'none';
+          }
+        },
+      });
+    }
+  }, [show]);
+
+  if (!show) return null;
+
+  return (
+    <div
+      ref={loadingModalRef}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(245, 243, 240, 0.9)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        borderRadius: '8px',
+        backdropFilter: 'blur(2px)',
+      }}
+    >
+      <div
+        style={{
+          background: colors.bgCard,
+          borderRadius: '16px',
+          padding: '32px',
+          boxShadow: `0 8px 32px ${colors.shadowMd}`,
+          maxWidth: '320px',
+          width: '90%',
+          textAlign: 'center',
+        }}
+      >
+        <h3
+          style={{
+            fontSize: '16px',
+            fontWeight: '600',
+            color: colors.textPrimary,
+            fontFamily: fonts.body,
+            marginBottom: '20px',
+          }}
+        >
+          Waiting for MCP server to start
+        </h3>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '8px',
+          }}
+        >
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              ref={(el) => {
+                if (el) dotsRef.current[i] = el;
+              }}
+              style={{
+                width: '12px',
+                height: '12px',
+                borderRadius: '50%',
+                background: colors.accentBlue,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/PromptsSection/PromptCallPanel.jsx

@@ -0,0 +1,125 @@
+import { colors, fonts } from '../../../theme';
+
+export default function PromptCallPanel({
+  prompt,
+  promptArgs,
+  onPromptArgsChange,
+  promptResult,
+  onGetPrompt,
+  loading,
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        border: `1px solid ${colors.borderLight}`,
+        borderRadius: '8px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          padding: '12px',
+          background: colors.bgSecondary,
+          borderBottom: `1px solid ${colors.borderLight}`,
+          fontWeight: '500',
+          fontSize: '14px',
+          color: colors.textPrimary,
+        }}
+      >
+        Get Prompt: {prompt.name}
+      </div>
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: '16px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+        }}
+      >
+        <div>
+          <label
+            style={{
+              display: 'block',
+              fontSize: '12px',
+              fontWeight: '500',
+              color: colors.textSecondary,
+              marginBottom: '6px',
+            }}
+          >
+            Arguments (JSON)
+          </label>
+          <textarea
+            value={promptArgs}
+            onChange={(e) => onPromptArgsChange(e.target.value)}
+            style={{
+              width: '100%',
+              minHeight: '150px',
+              padding: '10px',
+              border: `1px solid ${colors.borderLight}`,
+              borderRadius: '6px',
+              fontFamily: fonts.mono,
+              fontSize: '12px',
+              background: colors.bgCard,
+              color: colors.textPrimary,
+              resize: 'vertical',
+            }}
+          />
+        </div>
+        <button
+          onClick={onGetPrompt}
+          disabled={loading}
+          style={{
+            padding: '10px 20px',
+            background: colors.buttonPrimary,
+            color: colors.textInverse,
+            border: 'none',
+            borderRadius: '6px',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            fontFamily: fonts.body,
+            fontSize: '13px',
+            fontWeight: '500',
+            opacity: loading ? 0.6 : 1,
+          }}
+        >
+          {loading ? 'Getting...' : 'Get Prompt'}
+        </button>
+        {promptResult && (
+          <div>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '12px',
+                fontWeight: '500',
+                color: colors.textSecondary,
+                marginBottom: '6px',
+              }}
+            >
+              Result
+            </label>
+            <pre
+              style={{
+                padding: '12px',
+                background: colors.bgSecondary,
+                border: `1px solid ${colors.borderLight}`,
+                borderRadius: '6px',
+                fontSize: '12px',
+                fontFamily: fonts.mono,
+                color: promptResult.error ? colors.error : colors.textPrimary,
+                overflow: 'auto',
+                maxHeight: '300px',
+                margin: 0,
+              }}
+            >
+              {JSON.stringify(promptResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/PromptsSection/PromptItem.jsx

@@ -0,0 +1,48 @@
+import { colors } from '../../../theme';
+
+export default function PromptItem({ prompt, isSelected, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        padding: '12px',
+        borderBottom: `1px solid ${colors.borderLight}`,
+        cursor: 'pointer',
+        background: isSelected ? colors.bgSecondary : colors.bgCard,
+        transition: 'background 0.2s',
+      }}
+      onMouseEnter={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.background = colors.bgHover;
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.background = colors.bgCard;
+        }
+      }}
+    >
+      <div
+        style={{
+          fontWeight: '500',
+          fontSize: '13px',
+          color: colors.textPrimary,
+          marginBottom: '4px',
+        }}
+      >
+        {prompt.name}
+      </div>
+      {prompt.description && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textSecondary,
+            marginTop: '4px',
+          }}
+        >
+          {prompt.description}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/PromptsSection/PromptsList.jsx

@@ -0,0 +1,45 @@
+import { colors } from '../../../theme';
+import LoadingState from '../common/LoadingState';
+import ErrorState from '../common/ErrorState';
+import EmptyState from '../common/EmptyState';
+import PromptItem from './PromptItem';
+
+export default function PromptsList({
+  serverStatus,
+  promptsLoading,
+  promptsLoaded,
+  error,
+  prompts,
+  selectedPrompt,
+  onSelectPrompt,
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflow: 'auto',
+        background: colors.bgCard,
+        position: 'relative',
+      }}
+    >
+      {!serverStatus?.running ? (
+        <LoadingState message="Waiting for MCP server to start..." />
+      ) : promptsLoading || !promptsLoaded ? (
+        <LoadingState message="Loading prompts..." />
+      ) : error && error.includes('prompts:') ? (
+        <ErrorState message={`Error loading prompts: ${error.replace('prompts: ', '')}`} />
+      ) : prompts.length === 0 ? (
+        <EmptyState message="No prompts available." />
+      ) : (
+        prompts.map((prompt, idx) => (
+          <PromptItem
+            key={idx}
+            prompt={prompt}
+            isSelected={selectedPrompt?.name === prompt.name}
+            onClick={() => onSelectPrompt(prompt)}
+          />
+        ))
+      )}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/PromptsSection.jsx

@@ -0,0 +1,106 @@
+import { colors, fonts } from '../../theme';
+import PromptsList from './PromptsSection/PromptsList';
+import PromptCallPanel from './PromptsSection/PromptCallPanel';
+
+export default function PromptsSection({
+  prompts,
+  selectedPrompt,
+  onSelectPrompt,
+  promptArgs,
+  onPromptArgsChange,
+  promptResult,
+  onGetPrompt,
+  loading,
+  promptsLoading,
+  promptsLoaded,
+  serverStatus,
+  error,
+  onRefresh,
+}) {
+  const handleSelectPrompt = (prompt) => {
+    onSelectPrompt(prompt);
+    const exampleArgs = prompt.arguments
+      ? prompt.arguments.reduce((acc, arg) => {
+          acc[arg.name] = arg.default !== undefined ? arg.default : '';
+          return acc;
+        }, {})
+      : {};
+    onPromptArgsChange(JSON.stringify(exampleArgs, null, 2));
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <button
+          onClick={onRefresh}
+          disabled={loading || promptsLoading}
+          style={{
+            padding: '8px 16px',
+            background: colors.buttonPrimary,
+            color: colors.textInverse,
+            border: 'none',
+            borderRadius: '6px',
+            cursor: loading || promptsLoading ? 'not-allowed' : 'pointer',
+            fontFamily: fonts.body,
+            fontSize: '13px',
+            fontWeight: '500',
+            opacity: loading || promptsLoading ? 0.6 : 1,
+          }}
+        >
+          {promptsLoading ? 'Loading...' : 'Refresh Prompts'}
+        </button>
+        <span style={{ color: colors.textSecondary, fontSize: '13px' }}>
+          {promptsLoading
+            ? 'Loading prompts...'
+            : `${prompts.length} prompt${prompts.length !== 1 ? 's' : ''} available`}
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', gap: '16px', flex: 1, minHeight: 0 }}>
+        <div
+          style={{
+            flex: 1,
+            border: `1px solid ${colors.borderLight}`,
+            borderRadius: '8px',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <div
+            style={{
+              padding: '12px',
+              background: colors.bgSecondary,
+              borderBottom: `1px solid ${colors.borderLight}`,
+              fontWeight: '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+            }}
+          >
+            Available Prompts
+          </div>
+          <PromptsList
+            serverStatus={serverStatus}
+            promptsLoading={promptsLoading}
+            promptsLoaded={promptsLoaded}
+            error={error}
+            prompts={prompts}
+            selectedPrompt={selectedPrompt}
+            onSelectPrompt={handleSelectPrompt}
+          />
+        </div>
+
+        {selectedPrompt && (
+          <PromptCallPanel
+            prompt={selectedPrompt}
+            promptArgs={promptArgs}
+            onPromptArgsChange={onPromptArgsChange}
+            promptResult={promptResult}
+            onGetPrompt={onGetPrompt}
+            loading={loading}
+          />
+        )}
+      </div>
+    </div>
+  );
+}