@jtalk22/slack-mcp 2.0.0 → 3.1.0

package/public/demo-claude.html

@@ -19,22 +19,27 @@
   <meta property="og:description" content="Session-based Slack access for Claude with your existing workspace permissions. Search, thread, and messaging workflows.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://jtalk22.github.io/slack-mcp-server/public/demo-claude.html">
-  <meta property="og:image" content="https://assets-worker.james-20a.workers.dev/projects/slack-mcp-server/demo-claude.gif">
+  <meta property="og:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/social-preview-v3.png">
 
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Slack MCP Server - Session-Based Slack Access Demo">
   <meta name="twitter:description" content="Session-based Slack access for Claude with your existing workspace permissions. Search, thread, and messaging workflows.">
-  <meta name="twitter:image" content="https://assets-worker.james-20a.workers.dev/projects/slack-mcp-server/demo-claude.gif">
+  <meta name="twitter:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/social-preview-v3.png">
 
   <!-- Theme -->
   <meta name="theme-color" content="#1a1a1a">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💬</text></svg>">
   <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');
+
     /* ═══════════════════════════════════════════════════════════════
        Claude Desktop Color Palette (Dark Mode)
        ═══════════════════════════════════════════════════════════════ */
     :root {
+      --font-heading: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+      --font-body: "IBM Plex Sans", "Inter", "Segoe UI", sans-serif;
+
       /* Window chrome */
       --window-bg: #1a1a1a;
       --window-chrome: #2d2d2d;
@@ -83,7 +88,7 @@
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+      font-family: var(--font-body);
       font-size: 15px;
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
@@ -118,6 +123,8 @@
       align-items: center;
       justify-content: center;
       gap: 12px;
+      font-family: var(--font-heading);
+      letter-spacing: -0.02em;
     }
 
     .page-header p {
@@ -127,11 +134,11 @@
     .cta-strip {
       width: 100%;
       max-width: 960px;
-      margin-bottom: 16px;
+      margin-bottom: 14px;
       background: rgba(15, 52, 96, 0.72);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: 12px;
-      padding: 10px 14px;
+      padding: 10px 12px;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -183,6 +190,7 @@
       margin-bottom: 24px;
       flex-wrap: wrap;
       justify-content: center;
+      width: min(100%, 960px);
     }
 
     .scenario-btn {
@@ -257,6 +265,9 @@
       gap: 12px;
       margin-bottom: 16px;
       align-items: center;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: min(100%, 920px);
     }
 
     .speed-control {
@@ -346,6 +357,7 @@
       box-shadow: var(--shadow-lg);
       overflow: hidden;
       border: 1px solid var(--window-border);
+      position: relative;
     }
 
     .window-chrome {
@@ -911,6 +923,11 @@
       display: none !important;
     }
 
+    body.fullscreen-mode .cta-strip,
+    body.fullscreen-mode .scenario-caption {
+      display: none !important;
+    }
+
     body.fullscreen-mode .claude-window {
       max-width: 100%;
       height: 100vh;
@@ -967,31 +984,93 @@
     /* ═══════════════════════════════════════════════════════════════
        Responsive
        ═══════════════════════════════════════════════════════════════ */
+    @media (max-width: 900px) {
+      body {
+        padding: 14px;
+      }
+
+      .page-header {
+        margin-bottom: 16px;
+      }
+
+      .page-header h1 {
+        font-size: 24px;
+      }
+
+      .scenario-btn {
+        padding: 10px 14px;
+      }
+
+      .controls-bar {
+        gap: 10px;
+      }
+
+      .claude-window {
+        max-width: 100%;
+      }
+    }
+
     @media (max-width: 600px) {
       body {
         padding: 12px;
       }
 
+      .cta-strip {
+        padding: 10px;
+        gap: 8px;
+      }
+
+      .cta-strip .links {
+        width: 100%;
+      }
+
+      .cta-strip .note {
+        font-size: 12px;
+      }
+
       .page-header h1 {
         font-size: 22px;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .page-header p {
+        font-size: 14px;
       }
 
       .scenario-bar {
         gap: 8px;
+        margin-bottom: 14px;
       }
 
       .scenario-btn {
-        padding: 10px 14px;
+        padding: 9px 12px;
         font-size: 13px;
+        border-radius: 10px;
       }
 
       .scenario-btn .label {
         display: none;
       }
 
+      .controls-bar {
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .replay-btn,
+      .share-btn {
+        padding: 8px 12px;
+      }
+
+      .speed-control {
+        width: 100%;
+        justify-content: space-between;
+      }
+
       .chat-container {
-        height: 450px;
-        padding: 16px;
+        height: min(55vh, 450px);
+        padding: 14px;
       }
 
       .tools-dropdown {
@@ -1005,6 +1084,12 @@
       .tools-dropdown:hover {
         transform: translateX(-50%) translateY(0);
       }
+
+      .scenario-caption {
+        top: 56px;
+        font-size: 12px;
+        padding: 7px 14px;
+      }
     }
 
     /* ═══════════════════════════════════════════════════════════════
@@ -1046,7 +1131,7 @@
     /* Scenario Caption Overlay */
     .scenario-caption {
       position: absolute;
-      top: 72px;
+      top: 60px;
       left: 50%;
       transform: translateX(-50%);
       background: rgba(0, 0, 0, 0.75);
@@ -1059,6 +1144,10 @@
       transition: opacity 0.3s ease;
       z-index: 50;
       pointer-events: none;
+      max-width: calc(100% - 24px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .scenario-caption.visible {
@@ -1161,7 +1250,7 @@
   <header class="page-header">
     <h1>
       <span>Slack MCP Server</span>
-      <span class="badge">🔧 MCP Demo v2.0.0</span>
+      <span class="badge">🔧 MCP Demo v3.0.0</span>
     </h1>
     <p>See how Claude uses MCP tools to access your Slack workspace</p>
   </header>
@@ -1233,7 +1322,7 @@
       <div class="title-logo">💬</div>
       <h1>Slack MCP Server</h1>
       <p class="title-tagline">Full Slack access for Claude Desktop</p>
-      <p class="title-version">v2.0.0 • @jtalk22</p>
+      <p class="title-version">v3.0.0 • @jtalk22</p>
     </div>
 
     <!-- Scenario Caption Overlay -->

package/public/demo-video.html

@@ -9,19 +9,27 @@
   <meta property="og:title" content="Slack MCP Server - Session-Based Slack Access Demo">
   <meta property="og:description" content="Session-based Slack access for Claude with your existing workspace permissions. Video walkthrough for Slack workflows.">
   <meta property="og:url" content="https://jtalk22.github.io/slack-mcp-server/public/demo-video.html">
-  <meta property="og:image" content="https://raw.githubusercontent.com/jtalk22/slack-mcp-server/main/docs/images/demo-poster.png">
+  <meta property="og:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/demo-poster.png">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Slack MCP Server - Session-Based Slack Access Demo">
   <meta name="twitter:description" content="Session-based Slack access for Claude with your existing workspace permissions. Video walkthrough for Slack workflows.">
-  <meta name="twitter:image" content="https://raw.githubusercontent.com/jtalk22/slack-mcp-server/main/docs/images/demo-poster.png">
+  <meta name="twitter:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/demo-poster.png">
+  <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=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;
+    }
+
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-family: var(--font-body);
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
       min-height: 100vh;
       display: flex;
@@ -40,6 +48,8 @@
       font-weight: 600;
       text-align: center;
       margin-bottom: 0.5rem;
+      font-family: var(--font-heading);
+      letter-spacing: -0.02em;
     }
     .subtitle {
       color: #94a3b8;
@@ -137,6 +147,26 @@
     .back-link a:hover {
       color: #ffffff;
     }
+
+    @media (max-width: 640px) {
+      body {
+        padding: 1rem 0.75rem;
+      }
+
+      .cta-strip .links {
+        width: 100%;
+      }
+
+      .controls {
+        gap: 0.75rem;
+      }
+
+      .btn {
+        flex: 1;
+        min-width: 0;
+        padding: 0.72rem 0.95rem;
+      }
+    }
   </style>
 </head>
 <body>
@@ -156,8 +186,8 @@
 
     <div class="video-wrapper">
       <video id="demo" poster="../docs/images/demo-poster.png" playsinline>
-        <source src="../docs/videos/demo-claude-v1.2.webm" type="video/webm">
-        <source src="../docs/images/demo-claude-v1.2.gif" type="image/gif">
+        <source src="../docs/videos/demo-claude.webm" type="video/webm">
+        <source src="https://jtalk22.github.io/slack-mcp-server/docs/videos/demo-claude.webm" type="video/webm">
         Your browser does not support the video tag.
       </video>
     </div>
@@ -174,10 +204,18 @@
 
   <script>
     const video = document.getElementById('demo');
+    const HIGHLIGHT_START_SECONDS = 6;
+
+    function playFromHighlight() {
+      if (video.duration && video.duration > HIGHLIGHT_START_SECONDS + 1) {
+        video.currentTime = HIGHLIGHT_START_SECONDS;
+      }
+      return video.play();
+    }
 
     // Autoplay with 1 second delay
     setTimeout(() => {
-      video.play().catch(() => {
+      playFromHighlight().catch(() => {
         // Autoplay blocked, user will need to click
         console.log('Autoplay blocked, click to play');
       });
@@ -198,7 +236,7 @@
 
     // Loop the video
     video.addEventListener('ended', () => {
-      video.currentTime = 0;
+      video.currentTime = HIGHLIGHT_START_SECONDS;
       video.play();
     });
   </script>

package/public/demo.html

@@ -10,21 +10,23 @@
   <meta property="og:url" content="https://jtalk22.github.io/slack-mcp-server/public/demo.html">
   <meta property="og:title" content="Slack MCP Server - Session-Based Slack Access Demo">
   <meta property="og:description" content="Session-based Slack access for Claude with your existing workspace permissions. DMs, channels, search, and threads.">
-  <meta property="og:image" content="https://raw.githubusercontent.com/jtalk22/slack-mcp-server/main/docs/images/demo-main.png">
+  <meta property="og:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/demo-main.png">
 
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Slack MCP Server - Session-Based Slack Access Demo">
   <meta name="twitter:description" content="Session-based Slack access for Claude with your existing workspace permissions. DMs, channels, search, and threads.">
-  <meta name="twitter:image" content="https://raw.githubusercontent.com/jtalk22/slack-mcp-server/main/docs/images/demo-main.png">
+  <meta name="twitter:image" content="https://jtalk22.github.io/slack-mcp-server/docs/images/demo-main.png">
 
   <!-- SEO -->
   <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">