@mcp-shark/mcp-shark 1.5.13 → 1.6.0

package/core/tui/App.js

@@ -0,0 +1,144 @@
+import { Box, Text, useApp, useInput } from 'ink';
+/**
+ * MCP Shark Interactive TUI — Main App Component
+ * Lazygit-style full-screen terminal interface
+ */
+import { useEffect, useState } from 'react';
+import { runScan } from '#core/cli/ScanService.js';
+import { FindingsPanel } from './FindingsPanel.js';
+import { FixPanel } from './FixPanel.js';
+import { Header } from './Header.js';
+import { HelpBar } from './HelpBar.js';
+import { ServersPanel } from './ServersPanel.js';
+import { ToxicFlowsPanel } from './ToxicFlowsPanel.js';
+import { h } from './h.js';
+
+const PANELS = ['findings', 'servers', 'flows', 'fix'];
+const PANEL_LABELS = {
+  findings: 'Findings',
+  servers: 'Servers',
+  flows: 'Toxic Flows',
+  fix: 'Auto-Fix',
+};
+
+export function App() {
+  const { exit } = useApp();
+  const [scanResult, setScanResult] = useState(null);
+  const [activePanel, setActivePanel] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    const result = runScan({});
+    setScanResult(result);
+  }, []);
+
+  const rescan = () => {
+    setScanResult(null);
+    const result = runScan({});
+    setScanResult(result);
+    setSelectedIndex(0);
+  };
+
+  useInput((input, key) => {
+    if (input === 'q' || (key.ctrl && input === 'c')) {
+      exit();
+      return;
+    }
+
+    if (key.tab || input === 'l') {
+      setActivePanel((prev) => (prev + 1) % PANELS.length);
+      setSelectedIndex(0);
+      return;
+    }
+
+    if (input === '1') {
+      setActivePanel(0);
+      setSelectedIndex(0);
+    }
+    if (input === '2') {
+      setActivePanel(1);
+      setSelectedIndex(0);
+    }
+    if (input === '3') {
+      setActivePanel(2);
+      setSelectedIndex(0);
+    }
+    if (input === '4') {
+      setActivePanel(3);
+      setSelectedIndex(0);
+    }
+
+    if (input === 'r') {
+      rescan();
+      return;
+    }
+
+    if (key.downArrow || input === 'j') {
+      setSelectedIndex((prev) => prev + 1);
+    }
+    if (key.upArrow || input === 'k') {
+      setSelectedIndex((prev) => Math.max(0, prev - 1));
+    }
+  });
+
+  if (!scanResult) {
+    return h(
+      Box,
+      { flexDirection: 'column', padding: 1 },
+      h(Header, { score: null, grade: null }),
+      h(Box, { justifyContent: 'center', padding: 2 }, h(Text, { color: 'cyan' }, 'Scanning...'))
+    );
+  }
+
+  const panelName = PANELS[activePanel];
+
+  const tabs = PANELS.map((panel, idx) =>
+    h(
+      Box,
+      { key: panel, marginRight: 1 },
+      h(
+        Text,
+        {
+          bold: idx === activePanel,
+          color: idx === activePanel ? 'cyan' : 'gray',
+          inverse: idx === activePanel,
+        },
+        ` ${idx + 1}:${PANEL_LABELS[panel]} `
+      )
+    )
+  );
+
+  const panelProps = { selectedIndex };
+  let activeContent = null;
+
+  if (panelName === 'findings') {
+    activeContent = h(FindingsPanel, { findings: scanResult.findings, ...panelProps });
+  } else if (panelName === 'servers') {
+    activeContent = h(ServersPanel, {
+      servers: scanResult.servers,
+      findings: scanResult.findings,
+      ...panelProps,
+    });
+  } else if (panelName === 'flows') {
+    activeContent = h(ToxicFlowsPanel, { toxicFlows: scanResult.toxicFlows, ...panelProps });
+  } else if (panelName === 'fix') {
+    activeContent = h(FixPanel, { findings: scanResult.findings, onRescan: rescan });
+  }
+
+  return h(
+    Box,
+    { flexDirection: 'column', padding: 0 },
+    h(Header, {
+      score: scanResult.scoreResult.score,
+      grade: scanResult.scoreResult.grade,
+      serverCount: scanResult.serverCount,
+      findingCount: scanResult.findings.length,
+      flowCount: scanResult.toxicFlows.length,
+      ruleCount: scanResult.ruleCount,
+      elapsedMs: scanResult.elapsedMs,
+    }),
+    h(Box, { paddingX: 1 }, ...tabs),
+    h(Box, { flexDirection: 'column', paddingX: 1, flexGrow: 1 }, activeContent),
+    h(HelpBar, { activePanel: panelName })
+  );
+}

package/core/tui/FindingsPanel.js

@@ -0,0 +1,115 @@
+/**
+ * TUI Findings Panel — Scrollable list of security findings with detail view
+ */
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+const SEVERITY_COLORS = { critical: 'red', high: 'yellow', medium: 'blue', low: 'gray' };
+const SEVERITY_ICONS = { critical: '✖', high: '▲', medium: '●', low: '○' };
+const VISIBLE_ROWS = 15;
+
+export function FindingsPanel({ findings, selectedIndex }) {
+  if (findings.length === 0) {
+    return h(
+      Box,
+      { padding: 1 },
+      h(Text, { color: 'green' }, '✔ No security issues found. Your MCP setup looks clean.')
+    );
+  }
+
+  const clamped = Math.min(selectedIndex, findings.length - 1);
+  const scrollOffset = Math.max(0, clamped - VISIBLE_ROWS + 3);
+  const visible = findings.slice(scrollOffset, scrollOffset + VISIBLE_ROWS);
+  const selected = findings[clamped];
+
+  const rows = visible.map((finding, idx) => {
+    const actualIdx = scrollOffset + idx;
+    const isSelected = actualIdx === clamped;
+    const sev = (finding.severity || 'medium').toLowerCase();
+    const color = SEVERITY_COLORS[sev] || 'white';
+    const icon = SEVERITY_ICONS[sev] || '●';
+
+    return h(
+      Box,
+      { key: finding.rule_id + finding.title + actualIdx },
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'cyan' : color },
+        `${isSelected ? '▸' : ' '} ${icon} ${sev.toUpperCase().padEnd(8)}`
+      ),
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'white' : 'gray' },
+        ` ${truncate(finding.title, 70)}`
+      )
+    );
+  });
+
+  const scrollInfo =
+    findings.length > VISIBLE_ROWS
+      ? h(
+          Text,
+          { color: 'gray', dimColor: true },
+          `${scrollOffset > 0 ? '↑ ' : '  '}${scrollOffset + VISIBLE_ROWS < findings.length ? '↓ scroll' : '  end'} (${clamped + 1}/${findings.length})`
+        )
+      : null;
+
+  const detail = selected
+    ? h(
+        Box,
+        { flexDirection: 'column', borderStyle: 'single', borderColor: 'cyan', paddingX: 1 },
+        h(Text, { bold: true, color: 'white' }, ' Detail '),
+        h(Text, null, h(Text, { bold: true }, 'Rule:'), ` ${selected.rule_id || '—'}`),
+        h(
+          Text,
+          null,
+          h(Text, { bold: true }, 'Severity:'),
+          ' ',
+          h(
+            Text,
+            { color: SEVERITY_COLORS[(selected.severity || '').toLowerCase()] },
+            selected.severity
+          )
+        ),
+        h(Text, null, h(Text, { bold: true }, 'Server:'), ` ${selected.server_name || '—'}`),
+        h(Text, null, h(Text, { bold: true }, 'IDE:'), ` ${selected.ide || '—'}`),
+        h(
+          Text,
+          { wrap: 'wrap' },
+          h(Text, { bold: true }, 'Description:'),
+          ` ${selected.description || '—'}`
+        ),
+        selected.recommendation
+          ? h(
+              Text,
+              { wrap: 'wrap' },
+              h(Text, { bold: true }, 'Fix:'),
+              ` ${selected.recommendation}`
+            )
+          : null,
+        selected.fixable
+          ? h(Text, { color: 'green' }, '✔ Auto-fixable — press 4 to go to Fix panel')
+          : null
+      )
+    : null;
+
+  return h(
+    Box,
+    { flexDirection: 'column' },
+    h(
+      Box,
+      { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', paddingX: 1 },
+      h(Text, { bold: true, color: 'white' }, ` Findings (${findings.length}) `),
+      ...rows,
+      scrollInfo
+    ),
+    detail
+  );
+}
+
+function truncate(str, maxLen) {
+  if (!str) {
+    return '';
+  }
+  return str.length > maxLen ? `${str.slice(0, maxLen - 1)}…` : str;
+}

package/core/tui/FixPanel.js

@@ -0,0 +1,132 @@
+import { Box, Text, useInput } from 'ink';
+/**
+ * TUI Fix Panel — Auto-fix interface with interactive selection
+ */
+import { useState } from 'react';
+import { applyFixes } from '#core/cli/AutoFixEngine.js';
+import { h } from './h.js';
+
+export function FixPanel({ findings, onRescan }) {
+  const fixable = findings.filter((f) => f.fixable);
+  const [fixResult, setFixResult] = useState(null);
+  const [confirming, setConfirming] = useState(false);
+
+  useInput((input) => {
+    if (confirming) {
+      if (input === 'y') {
+        try {
+          setFixResult(applyFixes(findings));
+        } catch (err) {
+          setFixResult({
+            fixed: [],
+            skipped: [],
+            errors: [{ success: false, error: err.message, finding: { title: 'Apply fixes' } }],
+          });
+        }
+        setConfirming(false);
+      }
+      if (input === 'n') {
+        setConfirming(false);
+      }
+      return;
+    }
+
+    if (input === 'f' && fixable.length > 0) {
+      setConfirming(true);
+    }
+    if (input === 'u') {
+      try {
+        setFixResult(applyFixes(findings, { undo: true }));
+      } catch (err) {
+        setFixResult({
+          fixed: [],
+          skipped: [],
+          errors: [{ success: false, error: err.message, finding: { title: 'Undo fixes' } }],
+        });
+      }
+    }
+    if (input === 'r') {
+      setFixResult(null);
+      onRescan();
+    }
+  });
+
+  if (fixable.length === 0 && !fixResult) {
+    return h(
+      Box,
+      { padding: 1, flexDirection: 'column' },
+      h(Text, { color: 'green' }, '✔ No auto-fixable issues found.'),
+      h(Text, { color: 'gray' }, 'All findings require manual remediation.')
+    );
+  }
+
+  const fixRows = fixable.map((finding) =>
+    h(
+      Box,
+      { key: `${finding.rule_id}-${finding.title}` },
+      h(Text, { color: 'green' }, '  ● '),
+      h(Text, { color: 'white' }, `${finding.fix_type} — `),
+      h(Text, { color: 'gray' }, truncate(finding.title, 60))
+    )
+  );
+
+  const prompt = confirming
+    ? h(
+        Text,
+        { bold: true, color: 'yellow' },
+        `Apply ${fixable.length} fixes? Backups will be created. (y/n)`
+      )
+    : h(
+        Text,
+        { color: 'gray' },
+        'Press ',
+        h(Text, { bold: true, color: 'cyan' }, 'f'),
+        ' to fix all · ',
+        h(Text, { bold: true, color: 'cyan' }, 'u'),
+        ' to undo · ',
+        h(Text, { bold: true, color: 'cyan' }, 'r'),
+        ' to rescan'
+      );
+
+  const resultPanel = fixResult
+    ? h(
+        Box,
+        { flexDirection: 'column', borderStyle: 'single', borderColor: 'cyan', paddingX: 1 },
+        h(Text, { bold: true, color: 'white' }, ' Results '),
+        ...fixResult.fixed.map((fx) =>
+          h(Text, { key: `fix-${fx.message}`, color: 'green' }, `  ✔ ${fx.message}`)
+        ),
+        ...fixResult.errors.map((err) =>
+          h(Text, { key: `err-${err.error}`, color: 'red' }, `  ✖ ${err.error || err.reason}`)
+        ),
+        ...fixResult.skipped.map((sk) =>
+          h(Text, { key: `skip-${sk.reason}`, color: 'gray' }, `  ○ Skipped: ${sk.reason}`)
+        ),
+        h(
+          Text,
+          { bold: true },
+          `  ${fixResult.fixed.length} fixed · ${fixResult.errors.length} errors · ${fixResult.skipped.length} skipped`
+        )
+      )
+    : null;
+
+  return h(
+    Box,
+    { flexDirection: 'column' },
+    h(
+      Box,
+      { flexDirection: 'column', borderStyle: 'single', borderColor: 'green', paddingX: 1 },
+      h(Text, { bold: true, color: 'white' }, ` Auto-Fix (${fixable.length} fixable) `),
+      ...fixRows,
+      h(Box, { marginTop: 1 }, prompt)
+    ),
+    resultPanel
+  );
+}
+
+function truncate(str, maxLen) {
+  if (!str) {
+    return '';
+  }
+  return str.length > maxLen ? `${str.slice(0, maxLen - 1)}…` : str;
+}

package/core/tui/Header.js

@@ -0,0 +1,51 @@
+/**
+ * TUI Header — Score display and scan summary
+ */
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+const GRADE_COLORS = { A: 'green', B: 'green', C: 'yellow', D: 'yellow', F: 'red' };
+
+export function Header({
+  score,
+  grade,
+  serverCount,
+  findingCount,
+  flowCount,
+  ruleCount,
+  elapsedMs,
+}) {
+  const gradeColor = GRADE_COLORS[grade] || 'white';
+
+  const scoreDisplay =
+    score !== null
+      ? h(
+          '',
+          null,
+          h(Text, { bold: true }, 'Score: '),
+          h(Text, { bold: true, color: gradeColor }, `${score}/100 (${grade})`)
+        )
+      : h(Text, { color: 'gray' }, 'Scanning...');
+
+  const statsDisplay =
+    score !== null
+      ? h(
+          Text,
+          { color: 'gray' },
+          `${findingCount} findings · ${flowCount} flows · ${serverCount} servers · ${ruleCount} rules · ${elapsedMs}ms`
+        )
+      : null;
+
+  return h(
+    Box,
+    { flexDirection: 'row', paddingX: 1, justifyContent: 'space-between' },
+    h(
+      Box,
+      null,
+      h(Text, { bold: true, color: 'cyan' }, 'mcp-shark'),
+      h(Text, { color: 'gray' }, ' │ '),
+      scoreDisplay
+    ),
+    statsDisplay
+  );
+}

package/core/tui/HelpBar.js

@@ -0,0 +1,42 @@
+/**
+ * TUI Help Bar — Keyboard shortcuts displayed at the bottom
+ */
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+const COMMON_KEYS = [
+  { key: 'j/k', desc: 'navigate' },
+  { key: 'Tab', desc: 'next panel' },
+  { key: '1-4', desc: 'panel' },
+  { key: 'r', desc: 'rescan' },
+  { key: 'q', desc: 'quit' },
+];
+
+const PANEL_KEYS = {
+  findings: [],
+  servers: [],
+  flows: [],
+  fix: [
+    { key: 'f', desc: 'fix all' },
+    { key: 'u', desc: 'undo' },
+  ],
+};
+
+export function HelpBar({ activePanel }) {
+  const panelSpecific = PANEL_KEYS[activePanel] || [];
+  const allKeys = [...panelSpecific, ...COMMON_KEYS];
+
+  return h(
+    Box,
+    { paddingX: 1 },
+    ...allKeys.map(({ key, desc }, idx) =>
+      h(
+        Box,
+        { key, marginRight: 1 },
+        h(Text, { bold: true, color: 'cyan' }, key),
+        h(Text, { color: 'gray' }, ` ${desc}`),
+        idx < allKeys.length - 1 ? h(Text, { color: 'gray' }, ' │') : null
+      )
+    )
+  );
+}

package/core/tui/ServersPanel.js

@@ -0,0 +1,109 @@
+/**
+ * TUI Servers Panel — Server inventory with finding counts
+ */
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+export function ServersPanel({ servers, findings, selectedIndex }) {
+  if (servers.length === 0) {
+    return h(
+      Box,
+      { padding: 1 },
+      h(Text, { color: 'yellow' }, '\u25B2 No MCP servers detected across 15 IDEs.')
+    );
+  }
+
+  const clamped = Math.min(selectedIndex, servers.length - 1);
+  const selected = servers[clamped];
+  const selectedFindings = findings.filter((f) => f.server_name === selected?.name);
+
+  const rows = servers.map((server, idx) => {
+    const isSelected = idx === clamped;
+    const count = findings.filter((f) => f.server_name === server.name).length;
+    const countColor = count === 0 ? 'green' : count > 3 ? 'red' : 'yellow';
+
+    return h(
+      Box,
+      { key: `${server.name}-${server.ide}` },
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'cyan' : 'white' },
+        `${isSelected ? '▸' : ' '} ${server.name.padEnd(25)}`
+      ),
+      h(Text, { inverse: isSelected, color: isSelected ? 'white' : 'gray' }, server.ide.padEnd(15)),
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'white' : countColor },
+        count === 0 ? '✔ clean' : `${count} issues`
+      )
+    );
+  });
+
+  const findingRows = selectedFindings.slice(0, 5).map((f) =>
+    h(
+      Text,
+      {
+        key: `${f.rule_id}-${f.title}`,
+        color: (f.severity || '').toLowerCase() === 'critical' ? 'red' : 'yellow',
+      },
+      `  ${f.severity?.toUpperCase()} — ${f.title}`
+    )
+  );
+
+  const moreText =
+    selectedFindings.length > 5
+      ? h(Text, { color: 'gray' }, `  ... and ${selectedFindings.length - 5} more`)
+      : null;
+
+  const detail = selected
+    ? h(
+        Box,
+        { flexDirection: 'column', borderStyle: 'single', borderColor: 'cyan', paddingX: 1 },
+        h(Text, { bold: true, color: 'white' }, ` ${selected.name} `),
+        h(Text, null, h(Text, { bold: true }, 'IDE:'), ` ${selected.ide}`),
+        h(Text, null, h(Text, { bold: true }, 'Config:'), ` ${selected.configPath || '—'}`),
+        h(
+          Text,
+          null,
+          h(Text, { bold: true }, 'Transport:'),
+          ` ${detectTransport(selected.config)}`
+        ),
+        h(Text, null, h(Text, { bold: true }, 'Command:'), ` ${selected.config?.command || '—'}`),
+        h(
+          Text,
+          null,
+          h(Text, { bold: true }, 'Tools:'),
+          ` ${Array.isArray(selected.tools) ? selected.tools.length : '?'}`
+        ),
+        h(Text, null, h(Text, { bold: true }, 'Findings:'), ` ${selectedFindings.length}`),
+        selectedFindings.length > 0
+          ? h(Box, { flexDirection: 'column' }, ...findingRows, moreText)
+          : null
+      )
+    : null;
+
+  return h(
+    Box,
+    { flexDirection: 'column' },
+    h(
+      Box,
+      { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', paddingX: 1 },
+      h(Text, { bold: true, color: 'white' }, ` Servers (${servers.length}) `),
+      ...rows
+    ),
+    detail
+  );
+}
+
+function detectTransport(config) {
+  if (!config) {
+    return 'unknown';
+  }
+  if (config.command) {
+    return 'stdio';
+  }
+  if (config.url) {
+    return config.transport || 'http';
+  }
+  return config.transport || 'unknown';
+}

package/core/tui/ToxicFlowsPanel.js

@@ -0,0 +1,100 @@
+/**
+ * TUI Toxic Flows Panel — Cross-server attack path visualization
+ */
+import { Box, Text } from 'ink';
+import { h } from './h.js';
+
+export function ToxicFlowsPanel({ toxicFlows, selectedIndex }) {
+  if (toxicFlows.length === 0) {
+    return h(
+      Box,
+      { padding: 1 },
+      h(Text, { color: 'green' }, '✔ No toxic cross-server flows detected.')
+    );
+  }
+
+  const clamped = Math.min(selectedIndex, toxicFlows.length - 1);
+  const selected = toxicFlows[clamped];
+
+  const rows = toxicFlows.map((flow, idx) => {
+    const isSelected = idx === clamped;
+    const riskColor = (flow.risk || '').toLowerCase() === 'high' ? 'red' : 'yellow';
+    const flowKey = `${flow.source}-${flow.sink}-${flow.rule || idx}`;
+
+    return h(
+      Box,
+      { key: flowKey },
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'magenta' : riskColor },
+        `${isSelected ? '▸' : ' '} ${(flow.risk || 'MED').toUpperCase().padEnd(6)}`
+      ),
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'white' : 'gray' },
+        ` ${flow.source || '?'} → ${flow.sink || '?'}`
+      ),
+      h(
+        Text,
+        { inverse: isSelected, color: isSelected ? 'white' : 'gray', dimColor: !isSelected },
+        ` — ${truncate(flow.scenario || '', 50)}`
+      )
+    );
+  });
+
+  const caps = selected?.capabilities
+    ? Object.entries(selected.capabilities)
+        .filter(([, v]) => v)
+        .map(([k]) => k)
+        .join(', ')
+    : '—';
+
+  const detail = selected
+    ? h(
+        Box,
+        { flexDirection: 'column', borderStyle: 'single', borderColor: 'magenta', paddingX: 1 },
+        h(Text, { bold: true, color: 'magenta' }, ' Flow Detail '),
+        h(
+          Text,
+          null,
+          h(Text, { bold: true, color: 'red' }, selected.source),
+          h(Text, { color: 'gray' }, ' → '),
+          h(Text, { bold: true, color: 'red' }, selected.sink)
+        ),
+        h(
+          Text,
+          null,
+          h(Text, { bold: true }, 'Risk:'),
+          ' ',
+          h(Text, { color: selected.risk === 'high' ? 'red' : 'yellow' }, selected.risk)
+        ),
+        h(Text, null, h(Text, { bold: true }, 'Rule:'), ` ${selected.rule || '—'}`),
+        h(
+          Text,
+          { wrap: 'wrap' },
+          h(Text, { bold: true }, 'Scenario:'),
+          ` ${selected.scenario || '—'}`
+        ),
+        h(Text, { wrap: 'wrap' }, h(Text, { bold: true }, 'Capabilities:'), ` ${caps}`)
+      )
+    : null;
+
+  return h(
+    Box,
+    { flexDirection: 'column' },
+    h(
+      Box,
+      { flexDirection: 'column', borderStyle: 'single', borderColor: 'magenta', paddingX: 1 },
+      h(Text, { bold: true, color: 'white' }, ` Toxic Flows (${toxicFlows.length}) `),
+      ...rows
+    ),
+    detail
+  );
+}
+
+function truncate(str, maxLen) {
+  if (!str) {
+    return '';
+  }
+  return str.length > maxLen ? `${str.slice(0, maxLen - 1)}…` : str;
+}

package/core/tui/h.js

@@ -0,0 +1,8 @@
+/**
+ * JSX-free helper for React.createElement
+ * Keeps TUI code readable without requiring a build step.
+ */
+import { Fragment, createElement } from 'react';
+
+export const h = createElement;
+export const F = Fragment;