@mcp-shark/mcp-shark 1.4.0

package/ui/src/components/McpPlayground/ResourcesSection/ResourceCallPanel.jsx

@@ -0,0 +1,89 @@
+import { colors, fonts } from '../../../theme';
+
+export default function ResourceCallPanel({ resource, resourceResult, onReadResource, 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,
+        }}
+      >
+        Read Resource: {resource.uri}
+      </div>
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          padding: '16px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+        }}
+      >
+        <button
+          onClick={onReadResource}
+          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 ? 'Reading...' : 'Read Resource'}
+        </button>
+        {resourceResult && (
+          <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: resourceResult.error ? colors.error : colors.textPrimary,
+                overflow: 'auto',
+                maxHeight: '400px',
+                margin: 0,
+              }}
+            >
+              {JSON.stringify(resourceResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/ResourcesSection/ResourceItem.jsx

@@ -0,0 +1,59 @@
+import { colors } from '../../../theme';
+
+export default function ResourceItem({ resource, 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',
+        }}
+      >
+        {resource.uri}
+      </div>
+      {resource.name && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textSecondary,
+            marginTop: '4px',
+          }}
+        >
+          {resource.name}
+        </div>
+      )}
+      {resource.description && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textSecondary,
+            marginTop: '4px',
+          }}
+        >
+          {resource.description}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/ResourcesSection/ResourcesList.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 ResourceItem from './ResourceItem';
+
+export default function ResourcesList({
+  serverStatus,
+  resourcesLoading,
+  resourcesLoaded,
+  error,
+  resources,
+  selectedResource,
+  onSelectResource,
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflow: 'auto',
+        background: colors.bgCard,
+        position: 'relative',
+      }}
+    >
+      {!serverStatus?.running ? (
+        <LoadingState message="Waiting for MCP server to start..." />
+      ) : resourcesLoading || !resourcesLoaded ? (
+        <LoadingState message="Loading resources..." />
+      ) : error && error.includes('resources:') ? (
+        <ErrorState message={`Error loading resources: ${error.replace('resources: ', '')}`} />
+      ) : resources.length === 0 ? (
+        <EmptyState message="No resources available." />
+      ) : (
+        resources.map((resource, idx) => (
+          <ResourceItem
+            key={idx}
+            resource={resource}
+            isSelected={selectedResource?.uri === resource.uri}
+            onClick={() => onSelectResource(resource)}
+          />
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { colors, fonts } from '../../theme';
+import ResourcesList from './ResourcesSection/ResourcesList';
+import ResourceCallPanel from './ResourcesSection/ResourceCallPanel';
+
+export default function ResourcesSection({
+  resources,
+  selectedResource,
+  onSelectResource,
+  resourceResult,
+  onReadResource,
+  loading,
+  resourcesLoading,
+  resourcesLoaded,
+  serverStatus,
+  error,
+  onRefresh,
+}) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <button
+          onClick={onRefresh}
+          disabled={loading || resourcesLoading}
+          style={{
+            padding: '8px 16px',
+            background: colors.buttonPrimary,
+            color: colors.textInverse,
+            border: 'none',
+            borderRadius: '6px',
+            cursor: loading || resourcesLoading ? 'not-allowed' : 'pointer',
+            fontFamily: fonts.body,
+            fontSize: '13px',
+            fontWeight: '500',
+            opacity: loading || resourcesLoading ? 0.6 : 1,
+          }}
+        >
+          {resourcesLoading ? 'Loading...' : 'Refresh Resources'}
+        </button>
+        <span style={{ color: colors.textSecondary, fontSize: '13px' }}>
+          {resourcesLoading
+            ? 'Loading resources...'
+            : `${resources.length} resource${resources.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 Resources
+          </div>
+          <ResourcesList
+            serverStatus={serverStatus}
+            resourcesLoading={resourcesLoading}
+            resourcesLoaded={resourcesLoaded}
+            error={error}
+            resources={resources}
+            selectedResource={selectedResource}
+            onSelectResource={onSelectResource}
+          />
+        </div>
+
+        {selectedResource && (
+          <ResourceCallPanel
+            resource={selectedResource}
+            resourceResult={resourceResult}
+            onReadResource={onReadResource}
+            loading={loading}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/ToolsSection/ToolCallPanel.jsx

@@ -0,0 +1,125 @@
+import { colors, fonts } from '../../../theme';
+
+export default function ToolCallPanel({
+  tool,
+  toolArgs,
+  onToolArgsChange,
+  toolResult,
+  onCallTool,
+  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,
+        }}
+      >
+        Call Tool: {tool.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={toolArgs}
+            onChange={(e) => onToolArgsChange(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={onCallTool}
+          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 ? 'Calling...' : 'Call Tool'}
+        </button>
+        {toolResult && (
+          <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: toolResult.error ? colors.error : colors.textPrimary,
+                overflow: 'auto',
+                maxHeight: '300px',
+                margin: 0,
+              }}
+            >
+              {JSON.stringify(toolResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/ToolsSection/ToolItem.jsx

@@ -0,0 +1,48 @@
+import { colors } from '../../../theme';
+
+export default function ToolItem({ tool, 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',
+        }}
+      >
+        {tool.name}
+      </div>
+      {tool.description && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: colors.textSecondary,
+            marginTop: '4px',
+          }}
+        >
+          {tool.description}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/ToolsSection/ToolsList.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 ToolItem from './ToolItem';
+
+export default function ToolsList({
+  serverStatus,
+  toolsLoading,
+  toolsLoaded,
+  error,
+  tools,
+  selectedTool,
+  onSelectTool,
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflow: 'auto',
+        background: colors.bgCard,
+        position: 'relative',
+      }}
+    >
+      {!serverStatus?.running ? (
+        <LoadingState message="Waiting for MCP server to start..." />
+      ) : toolsLoading || !toolsLoaded ? (
+        <LoadingState message="Loading tools..." />
+      ) : error && error.includes('tools:') ? (
+        <ErrorState message={`Error loading tools: ${error.replace('tools: ', '')}`} />
+      ) : tools.length === 0 ? (
+        <EmptyState message="No tools available." />
+      ) : (
+        tools.map((tool, idx) => (
+          <ToolItem
+            key={idx}
+            tool={tool}
+            isSelected={selectedTool?.name === tool.name}
+            onClick={() => onSelectTool(tool)}
+          />
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { colors, fonts } from '../../theme';
+import ToolsList from './ToolsSection/ToolsList';
+import ToolCallPanel from './ToolsSection/ToolCallPanel';
+
+export default function ToolsSection({
+  tools,
+  selectedTool,
+  onSelectTool,
+  toolArgs,
+  onToolArgsChange,
+  toolResult,
+  onCallTool,
+  loading,
+  toolsLoading,
+  toolsLoaded,
+  serverStatus,
+  error,
+  onRefresh,
+}) {
+  const handleSelectTool = (tool) => {
+    onSelectTool(tool);
+    const exampleArgs = tool.inputSchema?.properties
+      ? Object.keys(tool.inputSchema.properties).reduce((acc, key) => {
+          const prop = tool.inputSchema.properties[key];
+          acc[key] = prop.default !== undefined ? prop.default : '';
+          return acc;
+        }, {})
+      : {};
+    onToolArgsChange(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 || toolsLoading}
+          style={{
+            padding: '8px 16px',
+            background: colors.buttonPrimary,
+            color: colors.textInverse,
+            border: 'none',
+            borderRadius: '6px',
+            cursor: loading || toolsLoading ? 'not-allowed' : 'pointer',
+            fontFamily: fonts.body,
+            fontSize: '13px',
+            fontWeight: '500',
+            opacity: loading || toolsLoading ? 0.6 : 1,
+          }}
+        >
+          {toolsLoading ? 'Loading...' : 'Refresh Tools'}
+        </button>
+        <span style={{ color: colors.textSecondary, fontSize: '13px' }}>
+          {toolsLoading
+            ? 'Loading tools...'
+            : `${tools.length} tool${tools.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 Tools
+          </div>
+          <ToolsList
+            serverStatus={serverStatus}
+            toolsLoading={toolsLoading}
+            toolsLoaded={toolsLoaded}
+            error={error}
+            tools={tools}
+            selectedTool={selectedTool}
+            onSelectTool={handleSelectTool}
+          />
+        </div>
+
+        {selectedTool && (
+          <ToolCallPanel
+            tool={selectedTool}
+            toolArgs={toolArgs}
+            onToolArgsChange={onToolArgsChange}
+            toolResult={toolResult}
+            onCallTool={onCallTool}
+            loading={loading}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/common/EmptyState.jsx

@@ -0,0 +1,17 @@
+import { colors, fonts } from '../../../theme';
+
+export default function EmptyState({ message }) {
+  return (
+    <div
+      style={{
+        padding: '40px',
+        textAlign: 'center',
+        color: colors.textSecondary,
+        fontFamily: fonts.body,
+        fontSize: '13px',
+      }}
+    >
+      {message}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/common/ErrorState.jsx

@@ -0,0 +1,17 @@
+import { colors, fonts } from '../../../theme';
+
+export default function ErrorState({ message }) {
+  return (
+    <div
+      style={{
+        padding: '40px',
+        textAlign: 'center',
+        color: colors.error,
+        fontFamily: fonts.body,
+        fontSize: '13px',
+      }}
+    >
+      {message}
+    </div>
+  );
+}

package/ui/src/components/McpPlayground/common/LoadingState.jsx

@@ -0,0 +1,17 @@
+import { colors, fonts } from '../../../theme';
+
+export default function LoadingState({ message }) {
+  return (
+    <div
+      style={{
+        padding: '40px',
+        textAlign: 'center',
+        color: colors.textSecondary,
+        fontFamily: fonts.body,
+        fontSize: '13px',
+      }}
+    >
+      {message}
+    </div>
+  );
+}