@mcp-shark/mcp-shark 1.4.1 → 1.5.0

package/ui/src/components/GroupedBySessionView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { colors, fonts } from '../theme';
-import RequestRow from './RequestRow';
 import GroupHeader from './GroupHeader';
+import RequestRow from './RequestRow';
 
 export default function GroupedBySessionView({
   groupedData,

package/ui/src/components/HexTab.jsx

@@ -17,7 +17,10 @@ const ChevronDown = ({ size = 14, color = 'currentColor', rotated = false }) =>
       transform: rotated ? 'rotate(-90deg)' : 'rotate(0deg)',
       transition: 'transform 0.2s ease',
     }}
+    role="img"
+    aria-label="Chevron down icon"
   >
+    <title>Chevron down icon</title>
     <polyline points="6 9 12 15 18 9" />
   </svg>
 );
@@ -35,8 +38,15 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
         marginBottom: '20px',
       }}
     >
-      <div
+      <button
+        type="button"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
         style={{
           padding: '16px 20px',
           background: isExpanded ? colors.bgCard : colors.bgSecondary,
@@ -47,6 +57,9 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
           alignItems: 'center',
           justifyContent: 'space-between',
           transition: 'background-color 0.15s ease',
+          width: '100%',
+          border: 'none',
+          textAlign: 'left',
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = colors.bgHover;
@@ -71,7 +84,7 @@ function CollapsibleRequestResponse({ title, titleColor, children, defaultExpand
           <ChevronDown size={14} color={titleColor} rotated={!isExpanded} />
           {title}
         </div>
-      </div>
+      </button>
       {isExpanded && <div style={{ padding: '20px' }}>{children}</div>}
     </div>
   );
@@ -100,7 +113,7 @@ function HexTab({ requestHexLines, responseHexLines, hasRequest, hasResponse })
               {requestHexLines.length > 0 ? (
                 requestHexLines.map((line, i) => (
                   <div
-                    key={i}
+                    key={`request-${line.offset}-${i}`}
                     style={{
                       display: 'flex',
                       gap: '16px',
@@ -150,7 +163,7 @@ function HexTab({ requestHexLines, responseHexLines, hasRequest, hasResponse })
               {responseHexLines.length > 0 ? (
                 responseHexLines.map((line, i) => (
                   <div
-                    key={i}
+                    key={`response-${line.offset}-${i}`}
                     style={{
                       display: 'flex',
                       gap: '16px',

package/ui/src/components/LogsToolbar.jsx

@@ -1,5 +1,5 @@
+import { IconDownload, IconSearch, IconTrash } from '@tabler/icons-react';
 import { colors, fonts } from '../theme';
-import { IconTrash, IconDownload, IconSearch } from '@tabler/icons-react';
 
 export default function LogsToolbar({
   filter,
@@ -117,6 +117,7 @@ export default function LogsToolbar({
       </label>
 
       <button
+        type="button"
         onClick={onClearLogs}
         style={{
           padding: '8px 14px',
@@ -148,6 +149,7 @@ export default function LogsToolbar({
       </button>
 
       <button
+        type="button"
         onClick={onExportLogs}
         style={{
           padding: '8px 14px',

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

@@ -1,6 +1,6 @@
+import anime from 'animejs';
 import { useEffect, useRef } from 'react';
 import { colors, fonts } from '../../theme';
-import anime from 'animejs';
 
 export default function LoadingModal({ show }) {
   const loadingModalRef = useRef(null);
@@ -42,7 +42,9 @@ export default function LoadingModal({ show }) {
     }
   }, [show]);
 
-  if (!show) return null;
+  if (!show) {
+    return null;
+  }
 
   return (
     <div
@@ -96,7 +98,9 @@ export default function LoadingModal({ show }) {
             <div
               key={i}
               ref={(el) => {
-                if (el) dotsRef.current[i] = el;
+                if (el) {
+                  dotsRef.current[i] = el;
+                }
               }}
               style={{
                 width: '12px',

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

@@ -43,6 +43,7 @@ export default function PromptCallPanel({
       >
         <div>
           <label
+            htmlFor="prompt-args-textarea"
             style={{
               display: 'block',
               fontSize: '12px',
@@ -54,6 +55,7 @@ export default function PromptCallPanel({
             Arguments (JSON)
           </label>
           <textarea
+            id="prompt-args-textarea"
             value={promptArgs}
             onChange={(e) => onPromptArgsChange(e.target.value)}
             style={{
@@ -71,6 +73,7 @@ export default function PromptCallPanel({
           />
         </div>
         <button
+          type="button"
           onClick={onGetPrompt}
           disabled={loading}
           style={{
@@ -91,6 +94,7 @@ export default function PromptCallPanel({
         {promptResult && (
           <div>
             <label
+              htmlFor="prompt-result-pre"
               style={{
                 display: 'block',
                 fontSize: '12px',
@@ -102,6 +106,7 @@ export default function PromptCallPanel({
               Result
             </label>
             <pre
+              id="prompt-result-pre"
               style={{
                 padding: '12px',
                 background: colors.bgSecondary,

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

@@ -2,47 +2,76 @@ import { colors } from '../../../theme';
 
 export default function PromptItem({ prompt, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select prompt ${prompt.name}`}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
+        width: '100%',
+        textAlign: 'left',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <div
-        style={{
-          fontWeight: '500',
-          fontSize: '13px',
-          color: colors.textPrimary,
-          marginBottom: '4px',
-        }}
-      >
-        {prompt.name}
-      </div>
-      {prompt.description && (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {prompt.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: prompt.description ? '6px' : '0',
+              lineHeight: '1.4',
+            }}
+          >
+            {prompt.name}
+          </div>
+          {prompt.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {prompt.description}
+            </div>
+          )}
         </div>
-      )}
-    </div>
+      </div>
+    </button>
   );
 }

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

@@ -1,7 +1,7 @@
 import { colors } from '../../../theme';
-import LoadingState from '../common/LoadingState';
-import ErrorState from '../common/ErrorState';
 import EmptyState from '../common/EmptyState';
+import ErrorState from '../common/ErrorState';
+import LoadingState from '../common/LoadingState';
 import PromptItem from './PromptItem';
 
 export default function PromptsList({
@@ -26,19 +26,21 @@ export default function PromptsList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : promptsLoading || !promptsLoaded ? (
         <LoadingState message="Loading prompts..." />
-      ) : error && error.includes('prompts:') ? (
+      ) : 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 style={{ padding: '8px 0' }}>
+          {prompts.map((prompt, idx) => (
+            <PromptItem
+              key={prompt.name || `prompt-${idx}`}
+              prompt={prompt}
+              isSelected={selectedPrompt?.name === prompt.name}
+              onClick={() => onSelectPrompt(prompt)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

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

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import PromptsList from './PromptsSection/PromptsList';
 import PromptCallPanel from './PromptsSection/PromptCallPanel';
+import PromptsList from './PromptsSection/PromptsList';
 
 export default function PromptsSection({
   prompts,
@@ -32,6 +32,7 @@ export default function PromptsSection({
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
         <button
+          type="button"
           onClick={onRefresh}
           disabled={loading || promptsLoading}
           style={{

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

@@ -35,6 +35,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
         }}
       >
         <button
+          type="button"
           onClick={onReadResource}
           disabled={loading}
           style={{
@@ -55,6 +56,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
         {resourceResult && (
           <div>
             <label
+              htmlFor="resource-result-pre"
               style={{
                 display: 'block',
                 fontSize: '12px',
@@ -66,6 +68,7 @@ export default function ResourceCallPanel({ resource, resourceResult, onReadReso
               Result
             </label>
             <pre
+              id="resource-result-pre"
               style={{
                 padding: '12px',
                 background: colors.bgSecondary,

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

@@ -2,58 +2,90 @@ import { colors } from '../../../theme';
 
 export default function ResourceItem({ resource, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select resource ${resource.uri}`}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
+        width: '100%',
+        textAlign: 'left',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <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={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {resource.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: resource.name || resource.description ? '6px' : '0',
+              lineHeight: '1.4',
+              wordBreak: 'break-word',
+            }}
+          >
+            {resource.uri}
+          </div>
+          {resource.name && (
+            <div
+              style={{
+                fontSize: '13px',
+                color: colors.textPrimary,
+                fontWeight: '500',
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {resource.name}
+            </div>
+          )}
+          {resource.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: resource.name ? '2px' : '4px',
+              }}
+            >
+              {resource.description}
+            </div>
+          )}
         </div>
-      )}
-    </div>
+      </div>
+    </button>
   );
 }

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

@@ -1,7 +1,7 @@
 import { colors } from '../../../theme';
-import LoadingState from '../common/LoadingState';
-import ErrorState from '../common/ErrorState';
 import EmptyState from '../common/EmptyState';
+import ErrorState from '../common/ErrorState';
+import LoadingState from '../common/LoadingState';
 import ResourceItem from './ResourceItem';
 
 export default function ResourcesList({
@@ -26,19 +26,21 @@ export default function ResourcesList({
         <LoadingState message="Waiting for MCP server to start..." />
       ) : resourcesLoading || !resourcesLoaded ? (
         <LoadingState message="Loading resources..." />
-      ) : error && error.includes('resources:') ? (
+      ) : 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 style={{ padding: '8px 0' }}>
+          {resources.map((resource, idx) => (
+            <ResourceItem
+              key={resource.uri || `resource-${idx}`}
+              resource={resource}
+              isSelected={selectedResource?.uri === resource.uri}
+              onClick={() => onSelectResource(resource)}
+            />
+          ))}
+        </div>
       )}
     </div>
   );

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

@@ -1,6 +1,6 @@
 import { colors, fonts } from '../../theme';
-import ResourcesList from './ResourcesSection/ResourcesList';
 import ResourceCallPanel from './ResourcesSection/ResourceCallPanel';
+import ResourcesList from './ResourcesSection/ResourcesList';
 
 export default function ResourcesSection({
   resources,
@@ -19,6 +19,7 @@ export default function ResourcesSection({
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
         <button
+          type="button"
           onClick={onRefresh}
           disabled={loading || resourcesLoading}
           style={{

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

@@ -43,6 +43,7 @@ export default function ToolCallPanel({
       >
         <div>
           <label
+            htmlFor="tool-args-textarea"
             style={{
               display: 'block',
               fontSize: '12px',
@@ -54,6 +55,7 @@ export default function ToolCallPanel({
             Arguments (JSON)
           </label>
           <textarea
+            id="tool-args-textarea"
             value={toolArgs}
             onChange={(e) => onToolArgsChange(e.target.value)}
             style={{
@@ -71,6 +73,7 @@ export default function ToolCallPanel({
           />
         </div>
         <button
+          type="button"
           onClick={onCallTool}
           disabled={loading}
           style={{
@@ -91,6 +94,7 @@ export default function ToolCallPanel({
         {toolResult && (
           <div>
             <label
+              htmlFor="tool-result-pre"
               style={{
                 display: 'block',
                 fontSize: '12px',
@@ -102,6 +106,7 @@ export default function ToolCallPanel({
               Result
             </label>
             <pre
+              id="tool-result-pre"
               style={{
                 padding: '12px',
                 background: colors.bgSecondary,

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

@@ -2,47 +2,76 @@ import { colors } from '../../../theme';
 
 export default function ToolItem({ tool, isSelected, onClick }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onClick}
+      aria-label={`Select tool ${tool.name}`}
       style={{
-        padding: '12px',
-        borderBottom: `1px solid ${colors.borderLight}`,
+        padding: '16px 20px',
+        margin: '4px 8px',
+        borderRadius: '8px',
         cursor: 'pointer',
-        background: isSelected ? colors.bgSecondary : colors.bgCard,
-        transition: 'background 0.2s',
+        background: isSelected ? colors.bgSelected : colors.bgCard,
+        border: isSelected ? `2px solid ${colors.accentBlue}` : `1px solid ${colors.borderLight}`,
+        boxShadow: isSelected ? `0 2px 4px ${colors.shadowSm}` : 'none',
+        transition: 'all 0.2s ease',
+        position: 'relative',
+        width: '100%',
+        textAlign: 'left',
       }}
       onMouseEnter={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgHover;
+          e.currentTarget.style.borderColor = colors.borderMedium;
+          e.currentTarget.style.boxShadow = `0 2px 4px ${colors.shadowSm}`;
         }
       }}
       onMouseLeave={(e) => {
         if (!isSelected) {
           e.currentTarget.style.background = colors.bgCard;
+          e.currentTarget.style.borderColor = colors.borderLight;
+          e.currentTarget.style.boxShadow = 'none';
         }
       }}
     >
-      <div
-        style={{
-          fontWeight: '500',
-          fontSize: '13px',
-          color: colors.textPrimary,
-          marginBottom: '4px',
-        }}
-      >
-        {tool.name}
-      </div>
-      {tool.description && (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
         <div
           style={{
-            fontSize: '12px',
-            color: colors.textSecondary,
-            marginTop: '4px',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isSelected ? colors.accentBlue : colors.textTertiary,
+            marginTop: '6px',
+            flexShrink: 0,
+            transition: 'background 0.2s',
           }}
-        >
-          {tool.description}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontWeight: isSelected ? '600' : '500',
+              fontSize: '14px',
+              color: colors.textPrimary,
+              marginBottom: tool.description ? '6px' : '0',
+              lineHeight: '1.4',
+            }}
+          >
+            {tool.name}
+          </div>
+          {tool.description && (
+            <div
+              style={{
+                fontSize: '12px',
+                color: colors.textSecondary,
+                lineHeight: '1.5',
+                marginTop: '4px',
+              }}
+            >
+              {tool.description}
+            </div>
+          )}
         </div>
-      )}
-    </div>
+      </div>
+    </button>
   );
 }