swagger-parser-mcp-server 2.0.4 → 2.3.0

package/dist/web/dashboard.css

@@ -0,0 +1,411 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+  --color-bg: #f8fafc;
+  --color-surface: #ffffff;
+  --color-text: #1e293b;
+  --color-muted: #475569;
+  --color-border: #e2e8f0;
+  --color-primary: #2563eb;
+  --color-primary-ink: #ffffff;
+  --color-accent: #f97316;
+  --color-danger: #b91c1c;
+  --shadow-card: 0 24px 60px -48px rgba(30, 41, 59, 0.5);
+  --radius-lg: 18px;
+  --radius-md: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  color: var(--color-text);
+  background:
+    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.09), transparent 30%),
+    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 35%), var(--color-bg);
+}
+
+.page-shell {
+  margin: 0 auto;
+  max-width: 1480px;
+  padding: 2rem 1rem 2.5rem;
+}
+
+.hero {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 1rem;
+}
+
+.eyebrow {
+  margin: 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+}
+
+h1 {
+  margin: 0.35rem 0 0;
+  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
+  line-height: 0.95;
+  letter-spacing: -0.03em;
+}
+
+.subtitle {
+  margin: 0.55rem 0 0;
+  max-width: 72ch;
+  color: var(--color-muted);
+}
+
+.hero-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.status-alert {
+  margin: 0 0 1rem;
+  padding: 0.8rem 1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+.status-alert.error {
+  border-color: rgba(185, 28, 28, 0.4);
+  background: rgba(185, 28, 28, 0.08);
+  color: var(--color-danger);
+}
+
+.dashboard-layout {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+.panel {
+  background: color-mix(in srgb, var(--color-surface) 92%, #dbeafe 8%);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: 1rem;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: baseline;
+  margin-bottom: 0.8rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
+}
+
+h3 {
+  margin: 0 0 0.6rem;
+  font-size: 1rem;
+}
+
+.caption {
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.88rem;
+}
+
+.button {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 200ms ease-out,
+    border-color 200ms ease-out,
+    transform 180ms ease-out;
+}
+
+.button:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.35);
+  outline-offset: 2px;
+}
+
+.button.primary {
+  background: var(--color-primary);
+  color: var(--color-primary-ink);
+}
+
+.button.primary:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+}
+
+.button.secondary {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text);
+}
+
+.button.secondary:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.snapshot-list {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.snapshot-item {
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.7rem;
+  background: var(--color-surface);
+  cursor: pointer;
+  transition:
+    border-color 180ms ease-out,
+    box-shadow 180ms ease-out;
+}
+
+.snapshot-item:hover {
+  border-color: rgba(37, 99, 235, 0.6);
+  box-shadow: 0 10px 24px -22px rgba(37, 99, 235, 0.9);
+}
+
+.snapshot-item time {
+  display: block;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  color: var(--color-muted);
+}
+
+.snapshot-item strong {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85rem;
+}
+
+.compare-form {
+  display: grid;
+  gap: 0.8rem;
+  margin-bottom: 1rem;
+}
+
+.compare-form label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.9rem;
+  color: var(--color-muted);
+}
+
+select {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+input[type='text'] {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  color: var(--color-text);
+  background: var(--color-surface);
+}
+
+.metric-grid {
+  display: grid;
+  margin: 0;
+  gap: 0.7rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.metric-grid dt {
+  color: var(--color-muted);
+  font-size: 0.82rem;
+}
+
+.metric-grid dd {
+  margin: 0.2rem 0 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.changes-table-wrap {
+  overflow: auto;
+  max-height: 360px;
+}
+
+.changes-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.changes-table th,
+.changes-table td {
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.55rem 0.4rem;
+  vertical-align: top;
+}
+
+.classification {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.classification.breaking {
+  color: var(--color-danger);
+}
+
+.classification.non-breaking {
+  color: var(--color-primary);
+}
+
+.classification.info {
+  color: var(--color-accent);
+}
+
+.history-filter-form {
+  display: grid;
+  gap: 0.8rem;
+  margin-bottom: 1rem;
+}
+
+.history-filter-form label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.9rem;
+  color: var(--color-muted);
+}
+
+.history-filter-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.history-list {
+  display: grid;
+  gap: 0.6rem;
+  max-height: 420px;
+  overflow: auto;
+}
+
+.history-item {
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  padding: 0.75rem;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    border-color 180ms ease-out,
+    box-shadow 180ms ease-out;
+}
+
+.history-item:hover {
+  border-color: rgba(37, 99, 235, 0.6);
+  box-shadow: 0 10px 24px -22px rgba(37, 99, 235, 0.9);
+}
+
+.history-item-top,
+.history-item-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: baseline;
+}
+
+.history-item-top {
+  margin-bottom: 0.35rem;
+}
+
+.history-item-top strong,
+.history-item-meta time {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.history-item-meta {
+  margin-bottom: 0.35rem;
+  font-size: 0.82rem;
+  color: var(--color-muted);
+}
+
+.detail-events {
+  display: grid;
+  gap: 0.45rem;
+  margin-bottom: 1rem;
+}
+
+.event-row {
+  border: 1px solid var(--color-border);
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--radius-md);
+  padding: 0.6rem 0.65rem;
+  font-size: 0.88rem;
+}
+
+.detail-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 1fr;
+}
+
+pre {
+  margin: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: rgba(248, 250, 252, 0.92);
+  padding: 0.75rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+  line-height: 1.4;
+  max-height: 380px;
+  overflow: auto;
+}
+
+@media (min-width: 980px) {
+  .dashboard-layout {
+    grid-template-columns: minmax(260px, 1fr) minmax(390px, 1.3fr) minmax(360px, 1.2fr);
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+}

package/dist/web/dashboard.html

@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Swagger Snapshot Diff Dashboard</title>
+    <link rel="stylesheet" href="/dashboard.css" />
+  </head>
+  <body>
+    <div class="page-shell">
+      <header class="hero">
+        <div>
+          <p class="eyebrow">Swagger Snapshot Review</p>
+          <h1>Read-only Diff Dashboard</h1>
+          <p class="subtitle">
+            Snapshot 이력 조회, diff 비교, endpoint before/after drill-down을 한 화면에서 확인합니다.
+          </p>
+        </div>
+        <div class="hero-actions">
+          <button id="refresh-snapshots-button" class="button secondary" type="button">Refresh</button>
+          <button id="capture-button" class="button primary" type="button">Capture Snapshot</button>
+        </div>
+      </header>
+
+      <p id="status-alert" class="status-alert" role="alert" aria-live="polite" hidden></p>
+
+      <main class="dashboard-layout">
+        <section class="panel">
+          <div class="panel-header">
+            <h2>Snapshots</h2>
+            <p id="source-caption" class="caption">Loading source...</p>
+          </div>
+          <div id="snapshot-list" class="snapshot-list" aria-live="polite"></div>
+        </section>
+
+        <section class="panel">
+          <div class="panel-header">
+            <h2>Diff Summary</h2>
+            <p class="caption">Select two snapshots to compare.</p>
+          </div>
+          <form id="compare-form" class="compare-form">
+            <label>
+              Baseline Snapshot
+              <select id="baseline-select" required></select>
+            </label>
+            <label>
+              Target Snapshot
+              <select id="target-select" required></select>
+            </label>
+            <button class="button primary" type="submit">Compare</button>
+          </form>
+
+          <dl class="metric-grid">
+            <div>
+              <dt>Total</dt>
+              <dd id="metric-total">-</dd>
+            </div>
+            <div>
+              <dt>Breaking</dt>
+              <dd id="metric-breaking">-</dd>
+            </div>
+            <div>
+              <dt>Non-breaking</dt>
+              <dd id="metric-non-breaking">-</dd>
+            </div>
+            <div>
+              <dt>Info</dt>
+              <dd id="metric-info">-</dd>
+            </div>
+          </dl>
+
+          <p id="diff-summary-line" class="caption">No diff selected.</p>
+
+          <div class="changes-table-wrap">
+            <table class="changes-table">
+              <thead>
+                <tr>
+                  <th>Endpoint</th>
+                  <th>Classification</th>
+                  <th>Reason</th>
+                </tr>
+              </thead>
+              <tbody id="change-table-body"></tbody>
+            </table>
+          </div>
+        </section>
+
+        <section class="panel">
+          <div class="panel-header">
+            <h2>Change History</h2>
+            <p id="history-caption" class="caption">Latest endpoint changes.</p>
+          </div>
+          <form id="history-filter-form" class="history-filter-form">
+            <label>
+              Path
+              <input id="history-path-input" type="text" placeholder="/users" />
+            </label>
+            <label>
+              Method
+              <select id="history-method-select">
+                <option value="">All</option>
+                <option value="get">GET</option>
+                <option value="post">POST</option>
+                <option value="put">PUT</option>
+                <option value="patch">PATCH</option>
+                <option value="delete">DELETE</option>
+                <option value="head">HEAD</option>
+                <option value="options">OPTIONS</option>
+                <option value="trace">TRACE</option>
+              </select>
+            </label>
+            <div class="history-filter-actions">
+              <button class="button primary" type="submit">Apply</button>
+              <button id="history-clear-button" class="button secondary" type="button">Clear</button>
+            </div>
+          </form>
+          <div id="history-list" class="history-list" aria-live="polite"></div>
+        </section>
+
+        <section class="panel">
+          <div class="panel-header">
+            <h2>Endpoint Detail</h2>
+            <p id="detail-heading" class="caption">Pick one endpoint from the diff table.</p>
+          </div>
+          <div id="detail-events" class="detail-events"></div>
+          <div class="detail-grid">
+            <article>
+              <h3>Before</h3>
+              <pre id="detail-before">No selection</pre>
+            </article>
+            <article>
+              <h3>After</h3>
+              <pre id="detail-after">No selection</pre>
+            </article>
+          </div>
+        </section>
+      </main>
+    </div>
+    <script type="module" src="/dashboard.js"></script>
+  </body>
+</html>