@jtalk22/slack-mcp 2.0.0 → 3.0.0

package/public/demo.html

@@ -22,9 +22,11 @@
   <meta name="description" content="Session-based Slack access for Claude with your existing workspace permissions. Interactive demo for DMs, channels, search, and thread workflows.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
   <style>
     :root {
+      --font-heading: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+      --font-body: "IBM Plex Sans", "Inter", "Segoe UI", sans-serif;
       --bg-primary: #0f0f1a;
       --bg-secondary: #1a1a2e;
       --bg-tertiary: #16213e;
@@ -45,7 +47,7 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: var(--font-body);
       background: var(--bg-primary);
       color: var(--text-primary);
       min-height: 100vh;
@@ -150,6 +152,7 @@
       font-size: 16px;
       font-weight: 600;
       color: var(--text-primary);
+      font-family: var(--font-heading);
     }
     .claude-header .subtitle {
       font-size: 12px;
@@ -276,6 +279,7 @@
       letter-spacing: 1px;
       color: var(--text-muted);
       margin-bottom: 12px;
+      font-family: var(--font-heading);
     }
 
     .try-buttons .scenarios {
@@ -352,6 +356,7 @@
     .dashboard-title h2 {
       font-size: 18px;
       font-weight: 600;
+      font-family: var(--font-heading);
     }
 
     .status-badge {
@@ -475,6 +480,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
+      font-family: var(--font-heading);
     }
 
     .online-dot {
@@ -490,6 +496,75 @@
       padding: 20px 24px;
     }
 
+    .mobile-scenario-rail {
+      display: none;
+      padding: 14px 16px;
+      background: rgba(15, 52, 96, 0.55);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .mobile-rail-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+
+    .mobile-rail-head h4 {
+      font-size: 12px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      font-family: var(--font-heading);
+    }
+
+    .mobile-scenario-buttons {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .mobile-scenario-btn {
+      background: rgba(255, 255, 255, 0.06);
+      color: var(--text-primary);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 10px;
+      padding: 10px 8px;
+      font-size: 12px;
+      font-weight: 600;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      cursor: pointer;
+      transition: var(--transition);
+      text-align: center;
+      font-family: var(--font-body);
+    }
+
+    .mobile-scenario-btn:hover {
+      border-color: var(--accent);
+      background: rgba(78, 205, 196, 0.15);
+    }
+
+    .mobile-scenario-btn .icon {
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    .mobile-cta {
+      margin-top: 10px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .mobile-reset {
+      padding: 4px 10px;
+      font-size: 11px;
+    }
+
     .message {
       display: flex;
       gap: 14px;
@@ -614,16 +689,53 @@
     @media (max-width: 1000px) {
       .split-container {
         grid-template-columns: 1fr;
+        height: auto;
+        min-height: calc(100vh - 88px);
       }
       .claude-panel {
         display: none;
       }
+      .mobile-scenario-rail {
+        display: block;
+      }
       .dashboard-content {
         grid-template-columns: 1fr;
       }
       .sidebar {
         display: none;
       }
+      .main-header {
+        padding: 14px 16px;
+      }
+      .messages-container {
+        padding: 16px;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .cta-strip {
+        gap: 8px;
+        padding: 10px 12px;
+      }
+      .mobile-scenario-buttons {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .mobile-scenario-btn {
+        padding: 10px 6px;
+      }
+      .dashboard-header {
+        padding: 14px 12px;
+      }
+      .dashboard-title h2 {
+        font-size: 16px;
+      }
+      .status-badge {
+        font-size: 11px;
+        padding: 3px 10px;
+      }
+      .messages-container {
+        min-height: 48vh;
+      }
     }
   </style>
 </head>
@@ -706,6 +818,28 @@
         </div>
       </div>
 
+      <div class="mobile-scenario-rail" aria-label="Scenario shortcuts">
+        <div class="mobile-rail-head">
+          <h4>Try a Scenario</h4>
+          <button class="reset-btn mobile-reset" onclick="resetDemo()">Reset Demo</button>
+        </div>
+        <div class="mobile-scenario-buttons">
+          <button class="mobile-scenario-btn" onclick="runScenario('findKey')">
+            <span class="icon">🔑</span>
+            <span>Find Key</span>
+          </button>
+          <button class="mobile-scenario-btn" onclick="runScenario('listChannels')">
+            <span class="icon">📋</span>
+            <span>Channels</span>
+          </button>
+          <button class="mobile-scenario-btn" onclick="runScenario('whoIsAlex')">
+            <span class="icon">👤</span>
+            <span>Who is Alex?</span>
+          </button>
+        </div>
+        <p class="mobile-cta">Tap a scenario to drive the live preview with one click.</p>
+      </div>
+
       <div class="dashboard-content">
         <aside class="sidebar">
           <div class="sidebar-section">

package/public/index.html

@@ -5,79 +5,92 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Slack Web API</title>
   <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+    :root {
+      --font-heading: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+      --font-body: "IBM Plex Sans", "Inter", "Segoe UI", sans-serif;
+      --bg: #0f1736;
+      --panel: #16213e;
+      --panel-alt: #0f3460;
+      --teal: #4ecdc4;
+      --teal-hover: #45b7aa;
+      --danger: #ff6b6b;
+      --search: #e94560;
+      --text: #e8ecff;
+      --muted: #9fb0cf;
+    }
+
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #1a1a2e;
-      color: #eee;
+      font-family: var(--font-body);
+      background: radial-gradient(circle at 20% -10%, #1b2f67 0%, var(--bg) 48%);
+      color: var(--text);
       min-height: 100vh;
       padding: 20px;
+      overflow-x: hidden;
     }
     .container { max-width: 1200px; margin: 0 auto; }
-    h1 { color: #4ecdc4; margin-bottom: 20px; }
-    .auth-section {
-      background: #16213e;
-      padding: 20px;
-      border-radius: 8px;
+    h1 {
+      color: var(--teal);
       margin-bottom: 20px;
+      font-family: var(--font-heading);
+      font-size: clamp(1.9rem, 2vw, 2.35rem);
+      line-height: 1.1;
+      letter-spacing: -0.02em;
     }
-    .auth-section input {
-      width: 300px;
-      padding: 10px;
-      border: none;
-      border-radius: 4px;
-      background: #0f3460;
-      color: #fff;
-      margin-right: 10px;
-    }
-    .auth-section button {
-      padding: 10px 20px;
-      background: #4ecdc4;
-      color: #1a1a2e;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-weight: bold;
-    }
-    .auth-section button:hover { background: #45b7aa; }
     .status { display: inline-block; margin-left: 15px; }
-    .status.ok { color: #4ecdc4; }
-    .status.error { color: #ff6b6b; }
-    .grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
+    .status.ok { color: var(--teal); }
+    .status.error { color: var(--danger); }
+    .grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
     .sidebar {
-      background: #16213e;
-      border-radius: 8px;
+      background: var(--panel);
+      border-radius: 12px;
       padding: 15px;
       height: fit-content;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+    .sidebar h3 {
+      color: var(--teal);
+      margin-bottom: 15px;
+      font-size: 13px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      font-family: var(--font-heading);
     }
-    .sidebar h3 { color: #4ecdc4; margin-bottom: 15px; font-size: 14px; }
     .conversation-list { list-style: none; }
     .conversation-list li {
       padding: 10px;
       border-radius: 4px;
       cursor: pointer;
       margin-bottom: 5px;
-      background: #0f3460;
+      background: var(--panel-alt);
     }
     .conversation-list li:hover { background: #1a4a7a; }
-    .conversation-list li.active { background: #4ecdc4; color: #1a1a2e; }
+    .conversation-list li.active { background: var(--teal); color: #1a1a2e; }
     .conversation-list .type { font-size: 11px; opacity: 0.7; }
     .main-panel {
-      background: #16213e;
-      border-radius: 8px;
+      background: var(--panel);
+      border-radius: 12px;
       padding: 20px;
       min-height: 500px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+    .main-panel h2 {
+      color: var(--teal);
+      margin-bottom: 15px;
+      font-family: var(--font-heading);
+      letter-spacing: -0.01em;
     }
-    .main-panel h2 { color: #4ecdc4; margin-bottom: 15px; }
     .messages { max-height: 400px; overflow-y: auto; margin-bottom: 15px; }
     .message {
-      background: #0f3460;
+      background: var(--panel-alt);
       padding: 12px;
       border-radius: 8px;
       margin-bottom: 10px;
     }
     .message .header { display: flex; justify-content: space-between; margin-bottom: 8px; }
-    .message .user { font-weight: bold; color: #4ecdc4; }
+    .message .user { font-weight: bold; color: var(--teal); }
     .message .time { font-size: 12px; opacity: 0.6; }
     .message .text { line-height: 1.5; white-space: pre-wrap; }
     .send-box { display: flex; gap: 10px; }
@@ -86,17 +99,19 @@
       padding: 12px;
       border: none;
       border-radius: 4px;
-      background: #0f3460;
+      background: var(--panel-alt);
       color: #fff;
+      min-width: 0;
     }
     .send-box button {
       padding: 12px 24px;
-      background: #4ecdc4;
+      background: var(--teal);
       color: #1a1a2e;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       font-weight: bold;
+      white-space: nowrap;
     }
     .search-section { margin-bottom: 20px; display: flex; gap: 10px; }
     .search-section input {
@@ -104,29 +119,31 @@
       padding: 10px;
       border: none;
       border-radius: 4px;
-      background: #0f3460;
+      background: var(--panel-alt);
       color: #fff;
+      min-width: 0;
     }
     .search-section button {
       padding: 10px 20px;
-      background: #e94560;
+      background: var(--search);
       color: #fff;
       border: none;
       border-radius: 4px;
       cursor: pointer;
+      white-space: nowrap;
     }
-    .loading { text-align: center; padding: 40px; opacity: 0.6; }
-    .error-msg { background: #ff6b6b22; color: #ff6b6b; padding: 15px; border-radius: 8px; }
+    .loading { text-align: center; padding: 40px; opacity: 0.6; color: var(--muted); }
+    .error-msg { background: #ff6b6b22; color: var(--danger); padding: 15px; border-radius: 8px; }
     .tabs { display: flex; gap: 5px; margin-bottom: 15px; }
     .tabs button {
       padding: 8px 16px;
-      background: #0f3460;
+      background: var(--panel-alt);
       color: #fff;
       border: none;
       border-radius: 4px;
       cursor: pointer;
     }
-    .tabs button.active { background: #4ecdc4; color: #1a1a2e; }
+    .tabs button.active { background: var(--teal); color: #1a1a2e; }
     /* Auth Modal */
     .modal-overlay {
       position: fixed;
@@ -139,36 +156,43 @@
     }
     .modal-overlay.hidden { display: none; }
     .modal {
-      background: #16213e;
-      padding: 40px;
+      background: var(--panel);
+      padding: 36px;
       border-radius: 12px;
-      max-width: 450px;
+      width: min(92vw, 460px);
       text-align: center;
-      border: 2px solid #4ecdc4;
+      border: 2px solid var(--teal);
+      max-height: calc(100vh - 40px);
+      overflow-y: auto;
+    }
+    .modal h2 {
+      color: var(--teal);
+      margin-bottom: 20px;
+      font-family: var(--font-heading);
+      letter-spacing: -0.01em;
     }
-    .modal h2 { color: #4ecdc4; margin-bottom: 20px; }
-    .modal p { color: #aaa; margin-bottom: 25px; line-height: 1.6; }
+    .modal p { color: #c2c7d6; margin-bottom: 25px; line-height: 1.6; }
     .modal code {
-      background: #0f3460;
+      background: var(--panel-alt);
       padding: 3px 8px;
       border-radius: 4px;
-      color: #4ecdc4;
+      color: var(--teal);
     }
     .modal input {
       width: 100%;
       padding: 14px;
-      border: 2px solid #0f3460;
+      border: 2px solid var(--panel-alt);
       border-radius: 6px;
-      background: #0f3460;
+      background: var(--panel-alt);
       color: #fff;
       font-size: 14px;
       margin-bottom: 15px;
     }
-    .modal input:focus { border-color: #4ecdc4; outline: none; }
+    .modal input:focus { border-color: var(--teal); outline: none; }
     .modal button {
       width: 100%;
       padding: 14px;
-      background: #4ecdc4;
+      background: var(--teal);
       color: #1a1a2e;
       border: none;
       border-radius: 6px;
@@ -176,8 +200,44 @@
       font-weight: bold;
       font-size: 16px;
     }
-    .modal button:hover { background: #45b7aa; }
-    .modal .error { color: #ff6b6b; margin-top: 10px; font-size: 14px; }
+    .modal button:hover { background: var(--teal-hover); }
+    .modal .error { color: var(--danger); margin-top: 10px; font-size: 14px; }
+
+    @media (max-width: 960px) {
+      body { padding: 16px; }
+      .grid { grid-template-columns: minmax(0, 1fr); }
+      .sidebar, .main-panel { padding: 16px; }
+      .messages { max-height: 50vh; }
+    }
+
+    @media (max-width: 640px) {
+      body { padding: 12px; }
+      h1 {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .status {
+        margin-left: 0;
+        font-size: 14px;
+      }
+      .tabs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      .search-section,
+      .send-box {
+        flex-direction: column;
+      }
+      .search-section button,
+      .send-box button {
+        width: 100%;
+      }
+      .modal {
+        width: min(92vw, 460px);
+        padding: 24px 18px;
+      }
+    }
   </style>
 </head>
 <body>
@@ -198,8 +258,8 @@
       <div class="sidebar">
         <h3>CONVERSATIONS</h3>
         <div class="tabs">
-          <button class="active" onclick="loadConversations('im,mpim')">DMs</button>
-          <button onclick="loadConversations('public_channel,private_channel')">Channels</button>
+          <button class="active" onclick="loadConversations('im,mpim', this)">DMs</button>
+          <button onclick="loadConversations('public_channel,private_channel', this)">Channels</button>
         </div>
         <ul id="conversationList" class="conversation-list">
           <li class="loading">Enter API key to connect</li>
@@ -306,23 +366,26 @@
         }
       }
     }
-    async function loadConversations(types) {
+    async function loadConversations(types, sourceButton = null) {
       const list = document.getElementById('conversationList');
       list.innerHTML = '<li class="loading">Loading...</li>';
       document.querySelectorAll('.tabs button').forEach(b => b.classList.remove('active'));
-      if (event && event.target) event.target.classList.add('active');
+      if (!sourceButton) {
+        sourceButton = document.querySelector('.tabs button:first-child');
+      }
+      if (sourceButton) sourceButton.classList.add('active');
       try {
         const data = await api('/conversations?types=' + types);
         list.innerHTML = data.conversations.map(c =>
-          '<li onclick="loadHistory(\'' + c.id + '\', \'' + c.name.replace(/'/g, "\\'") + '\')"><div>' + c.name + '</div><div class="type">' + c.type + '</div></li>'
+          '<li onclick="loadHistory(\'' + c.id + '\', \'' + c.name.replace(/'/g, "\\'") + '\', this)"><div>' + c.name + '</div><div class="type">' + c.type + '</div></li>'
         ).join('');
       } catch (e) { list.innerHTML = '<li class="error-msg">' + e.message + '</li>'; }
     }
-    async function loadHistory(channelId, name) {
+    async function loadHistory(channelId, name, sourceItem = null) {
       currentChannel = channelId;
       document.getElementById('channelName').textContent = name;
       document.querySelectorAll('.conversation-list li').forEach(li => li.classList.remove('active'));
-      event.target.closest('li').classList.add('active');
+      if (sourceItem) sourceItem.classList.add('active');
       const container = document.getElementById('messages');
       container.innerHTML = '<div class="loading">Loading messages...</div>';
       try {