@jtalk22/slack-mcp 1.2.0 → 1.2.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026
+Copyright (c) 2026 jtalk22
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,25 +1,45 @@
-# Slack MCP Server
+<p align="center">
+  <a href="https://jtalk22.github.io/slack-mcp-server/public/demo.html"><img src="docs/assets/icon-512.png" alt="Slack MCP Server" width="80"></a>
+</p>
+
+<h1 align="center">Slack MCP Server</h1>
+
+<p align="center">
+  <em>Give Claude the same Slack access you have.<br>
+  DMs, threads, history—using your existing Slack session.</em>
+</p>
+
+<p align="center">
+  <a href="https://jtalk22.github.io/slack-mcp-server/public/demo-video.html">
+    <img src="docs/images/demo-readme.gif" alt="Slack MCP tools in action" width="640">
+  </a>
+</p>
 
-*Full workspace access via local session mirroring. DMs, threads, and history—no admin approval required.*
+<p align="center">
+  <a href="https://www.npmjs.com/package/@jtalk22/slack-mcp"><img src="https://img.shields.io/badge/npm-Install-blue?style=for-the-badge&logo=npm&logoColor=white" alt="npm"></a>
+  <a href="https://github.com/jtalk22/slack-mcp-server/pkgs/container/slack-mcp-server"><img src="https://img.shields.io/badge/Docker-Pull-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker"></a>
+</p>
 
-[![Live Demo](https://img.shields.io/badge/LIVE%20DEMO-Try%20It%20Now-00C853?style=for-the-badge&logo=slack&logoColor=white)](https://jtalk22.github.io/slack-mcp-server/public/demo.html)
-[![Claude Demo](https://img.shields.io/badge/CLAUDE%20DEMO-See%20MCP%20Tools-da7756?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==&logoColor=white)](https://jtalk22.github.io/slack-mcp-server/public/demo-claude.html)
+<p align="center">
+  <a href="https://jtalk22.github.io/slack-mcp-server/public/demo.html"><img src="https://img.shields.io/badge/LIVE%20DEMO-Try%20It%20Now-00C853?style=for-the-badge&logo=slack&logoColor=white" alt="Live Demo"></a>
+  <a href="https://jtalk22.github.io/slack-mcp-server/public/demo-claude.html"><img src="https://img.shields.io/badge/CLAUDE%20DEMO-See%20MCP%20Tools-da7756?style=for-the-badge" alt="Claude Demo"></a>
+</p>
 
-[![npm](https://img.shields.io/npm/v/@jtalk22/slack-mcp?color=blue&label=npm)](https://www.npmjs.com/package/@jtalk22/slack-mcp)
-[![Docker](https://img.shields.io/badge/docker-ghcr.io-blue)](https://github.com/jtalk22/slack-mcp-server/pkgs/container/slack-mcp-server)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Node.js](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen.svg)](https://nodejs.org/)
-[![GitHub Sponsors](https://img.shields.io/github/sponsors/jtalk22?label=Sponsor&logo=github)](https://github.com/sponsors/jtalk22)
+<br>
 
 <p align="center">
-  <img src="https://assets-worker.james-20a.workers.dev/projects/slack-mcp-server/demo-claude.gif" alt="Claude Desktop using Slack MCP tools" width="800">
+  <a href="https://www.npmjs.com/package/@jtalk22/slack-mcp"><img src="https://img.shields.io/npm/dm/@jtalk22/slack-mcp?label=downloads&color=CB3837" alt="npm downloads"></a>
+  <a href="https://github.com/jtalk22/slack-mcp-server/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/jtalk22/slack-mcp-server/ci.yml?label=build" alt="Build Status"></a>
+  <a href="https://smithery.ai/server/jtalk22/slack-mcp-server"><img src="https://img.shields.io/badge/Smithery-Registry-4A154B" alt="Smithery"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
+  <a href="https://github.com/sponsors/jtalk22"><img src="https://img.shields.io/badge/Sponsor-♡-ea4aaa?logo=github" alt="Sponsor"></a>
 </p>
 
 ---
 
 ### Why This Exists
 
-I built this because I was working with someone to help me manage a complex workload, and we kept hitting walls. They needed context from my messages—"what did X say about Y?"—but Slack's API blocks access to DMs without admin approval.
+I built this because I was working with someone to help me manage a complex workload, and we kept hitting walls. They needed context from my messages—"what did X say about Y?"—and standard app/OAuth flows were too constrained for that workflow.
 
 Screenshotting messages is not a workflow.
 
@@ -27,59 +47,17 @@ This server bridges the gap. It creates a secure, local bridge between Claude an
 
 ![Slack MCP Server Web UI](docs/images/demo-main.png)
 
-> **[Try the Interactive Demo](https://jtalk22.github.io/slack-mcp-server/public/demo.html)** - See the Web UI in action
->
-> **[See Claude Desktop Demo](https://jtalk22.github.io/slack-mcp-server/public/demo-claude.html)** - Watch MCP tools in action
-
 ---
 
 ## Architecture: Local Session Mirroring
 
 Instead of authenticating as a bot, this server leverages your existing Chrome session credentials (macOS) or manual token injection (Linux/Windows). It mirrors your user access exactly—if you can see it in Slack, Claude can see it too.
 
-```mermaid
-sequenceDiagram
-    participant Chrome as Chrome Browser
-    participant Script as AppleScript
-    participant Store as Token Store
-    participant MCP as MCP Server
-    participant Slack as Slack API
-
-    Note over Chrome: You're logged into Slack
-    Script->>Chrome: Execute JavaScript in Slack tab
-    Chrome-->>Script: xoxc- token + xoxd- cookie
-    Script->>Store: Save to ~/.slack-mcp-tokens.json
-    Store->>Store: Encrypt in macOS Keychain
-
-    Note over MCP: Claude asks for DMs
-    MCP->>Store: Load credentials
-    Store-->>MCP: Token + Cookie
-    MCP->>Slack: GET conversations.history
-    Slack-->>MCP: Full message history
-    MCP-->>MCP: Return to Claude
-```
+![Session Mirroring Flow](docs/images/diagram-session-flow.svg)
 
 ### Why Not OAuth?
 
-```mermaid
-flowchart LR
-    subgraph Traditional["Official Slack API (OAuth)"]
-        A[Create App] --> B[Request Scopes]
-        B --> C[Admin Approval]
-        C --> D[User Authorization]
-        D --> E[Limited Access]
-        E --> F["No DMs without<br/>per-conversation consent"]
-    end
-
-    subgraph ThisServer["Session Mirroring"]
-        G[Open Slack in Chrome] --> H[Mirror Session]
-        H --> I[Full Access]
-        I --> J["Your DMs, Channels,<br/>Search, History"]
-    end
-
-    style Traditional fill:#ffcccc
-    style ThisServer fill:#ccffcc
-```
+![OAuth vs Session Mirroring](docs/images/diagram-oauth-comparison.svg)
 
 **Trade-off:** Session tokens expire every 1-2 weeks. Auto-refresh (macOS) or manual update keeps things running.
 
@@ -120,6 +98,18 @@ flowchart LR
 
 ## Quick Start
 
+**Runtime:** Node.js 20+
+
+### 2-Minute Verify
+
+```bash
+npx -y @jtalk22/slack-mcp --version
+npx -y @jtalk22/slack-mcp --setup
+npx -y @jtalk22/slack-mcp --status
+```
+
+If `--status` returns valid workspace/user info, your install path is working.
+
 ### Option A: npm (Recommended)
 
 ```bash
@@ -151,7 +141,7 @@ docker pull ghcr.io/jtalk22/slack-mcp-server:latest
 The interactive setup wizard handles token extraction and validation automatically:
 
 ```bash
-npx @jtalk22/slack-mcp --setup
+npx -y @jtalk22/slack-mcp --setup
 ```
 
 - **macOS**: Auto-extracts tokens from Chrome (have Slack open in a tab)
@@ -162,7 +152,7 @@ npx @jtalk22/slack-mcp --setup
 #### Check Token Status
 
 ```bash
-npx @jtalk22/slack-mcp --status
+npx -y @jtalk22/slack-mcp --status
 ```
 
 #### Alternative: Manual Token Scripts
@@ -297,20 +287,20 @@ finally { refreshInProgress = false; }
 
 ---
 
-## Web UI (for claude.ai)
+## Web UI (for claude.ai — no MCP support)
 
-Since claude.ai doesn't support MCP, use the REST server:
+If you're using claude.ai in a browser (which doesn't support MCP), you can use the REST server instead:
 
 ```bash
 npm run web
-# Or: npx @jtalk22/slack-mcp web
+# Or: npx -y @jtalk22/slack-mcp web
 ```
 
 **Magic Link:** The console prints a one-click URL with the API key embedded:
 
 ```
 ════════════════════════════════════════════════════════════
-  Slack Web API Server v1.1.7
+  Slack Web API Server v1.2.2
 ════════════════════════════════════════════════════════════
 
   Dashboard: http://localhost:3000/?key=smcp_xxxxxxxxxxxx
@@ -329,6 +319,16 @@ Just click the link - no copy-paste needed. The key is saved to your browser and
 
 ---
 
+## Operations Guides
+
+- [Deployment Modes](docs/DEPLOYMENT-MODES.md) - Choose the right operating model (`stdio`, `web`, hosted HTTP, Smithery/Worker)
+- [Use Case Recipes](docs/USE_CASE_RECIPES.md) - 12 copy/paste prompts mapped to current tool contracts
+- [Support Boundaries](docs/SUPPORT-BOUNDARIES.md) - Scope, response targets, and solo-maintainer capacity limits
+
+If you're evaluating team rollout, start with [Deployment Modes](docs/DEPLOYMENT-MODES.md) before exposing remote endpoints.
+
+---
+
 ## Troubleshooting
 
 ### Tokens Expired

package/docs/COMMUNICATION-STYLE.md

@@ -0,0 +1,58 @@
+# Communication Style Guide
+
+Use this guide for release notes, issue replies, and changelog entries.
+
+## Rules
+
+1. Keep text technical, concise, and factual.
+2. Do not include model/tool credit lines.
+3. Do not include co-author trailers from tooling.
+4. State exact versions and commands when relevant.
+5. Avoid speculative claims.
+
+## Issue Reply Template
+
+```md
+Thanks for reporting this.
+
+Status: fixed in `<version>`.
+
+Included:
+- `<change 1>`
+- `<change 2>`
+
+Install/update:
+- `npx -y @jtalk22/slack-mcp`
+- `npm i -g @jtalk22/slack-mcp@<version>`
+```
+
+## Release Notes Template
+
+````md
+## <version> — <short title>
+
+### Fixed
+- <item>
+- <item>
+
+### Runtime / Security
+- <item>
+
+### Verify
+```bash
+<command>
+<command>
+```
+````
+
+## Changelog Entry Template
+
+```md
+## [<version>] - YYYY-MM-DD
+
+### Fixed
+- <item>
+
+### Changed
+- <item>
+```

package/docs/DEPLOYMENT-MODES.md

@@ -0,0 +1,48 @@
+# Deployment Modes
+
+Use this guide to choose the right operating mode before rollout.
+
+## Quick Chooser
+
+- Choose `stdio` for personal use in Claude Desktop/Claude Code.
+- Choose local `web` for browser workflows and manual Slack browsing.
+- Choose hosted HTTP only when you need remote execution and can handle token operations.
+- Choose Smithery/Worker only when your consumers require registry-hosted MCP transport.
+
+## Mode Matrix
+
+| Mode | Start Command | Best For | Auth Material | Exposure | Notes |
+|------|---------------|----------|---------------|----------|-------|
+| Local MCP (`stdio`) | `npx -y @jtalk22/slack-mcp` | Individual daily usage in Claude | `SLACK_TOKEN` + `SLACK_COOKIE` via token file/env | Local process | Lowest ops burden |
+| Local Web UI (`web`) | `npx -y @jtalk22/slack-mcp web` | Browser-first usage, manual search/send | Same as above + generated API key | `localhost` by default | Useful when MCP is not available |
+| Hosted MCP (`http`) | `node src/server-http.js` | Controlled hosted integration | Env-injected Slack token/cookie | Remote endpoint | Requires runtime hardening and monitoring |
+| Smithery/Worker | `wrangler deploy` + Smithery publish flow | Registry distribution for hosted consumers | Query/env token handoff | Remote endpoint | Keep worker version parity with npm release |
+
+## Team Deployment Guidance
+
+If you are deploying for more than one operator:
+
+1. Start with one maintainer on local `stdio`.
+2. Document token lifecycle and rotation ownership.
+3. Define support window and incident contact before enabling hosted mode.
+4. Validate `/health` and MCP initialize responses on every release.
+
+## Release Checklist by Mode
+
+### Local `stdio`
+
+1. `npx -y @jtalk22/slack-mcp --status`
+2. `npx -y @jtalk22/slack-mcp --help`
+3. Confirm tool list in Claude client.
+
+### Local `web`
+
+1. `npx -y @jtalk22/slack-mcp web`
+2. Verify API key generation at `~/.slack-mcp-api-key`.
+3. Verify `/health`, `/conversations`, and `/search` endpoints.
+
+### Hosted (`http` or Worker)
+
+1. Verify `version` parity across `package.json`, server metadata, and health responses.
+2. Confirm `slack_get_thread`, `slack_search_messages`, and `slack_users_info` behavior.
+3. Confirm token handling mode (ephemeral vs env persistence) is documented.

package/docs/SETUP.md

@@ -2,7 +2,7 @@
 
 ## Prerequisites
 
-- Node.js 18+
+- Node.js 20+
 - Google Chrome (for token extraction)
 - macOS (for Keychain storage - other platforms use file storage only)
 
@@ -25,16 +25,22 @@ npm install
 
 ### 3. Get Slack Tokens
 
-**Option A: Automatic Extraction**
+**Option A: Setup Wizard (recommended)**
 
 1. Open Chrome
 2. Navigate to https://app.slack.com and log in
 3. Run:
    ```bash
-   npm run tokens:auto
+   npx -y @jtalk22/slack-mcp --setup
    ```
 
-**Option B: Manual Extraction**
+**Option B: Automatic Extraction (repo clone workflow)**
+
+```bash
+npm run tokens:auto
+```
+
+**Option C: Manual Extraction**
 
 1. Open https://app.slack.com in Chrome
 2. Press F12 to open DevTools
@@ -114,7 +120,7 @@ You should see your username and team name.
 
 ### "No credentials found"
 
-Run `npm run tokens:auto` with Slack open in Chrome, or `npm run tokens:refresh` to enter manually.
+Run `npx -y @jtalk22/slack-mcp --setup` with Slack open in Chrome, or `npm run tokens:refresh` to enter manually.
 
 ### "invalid_auth" Error
 

package/docs/SUPPORT-BOUNDARIES.md

@@ -0,0 +1,49 @@
+# Support Boundaries
+
+This document sets expectations for issue triage, support scope, and rollout safety.
+
+## In Scope
+
+- Reproducible bugs in published release behavior.
+- Install and setup blockers for supported Node/runtime paths.
+- Regressions in existing tools (`slack_get_thread`, `slack_search_messages`, etc.).
+- Documentation corrections with clear technical evidence.
+
+## Out of Scope
+
+- Custom Slack policy/legal interpretation for a specific organization.
+- Workspace-specific data migrations or bespoke integrations.
+- Real-time operational support for third-party hosting providers.
+- Urgent production incident ownership for self-hosted external deployments.
+
+## Intake Requirements
+
+Include the following in every issue:
+
+1. Version (`npm view @jtalk22/slack-mcp version` output).
+2. Runtime mode (`stdio`, `web`, `http`, or Worker/Smithery).
+3. OS and Node version.
+4. Minimal reproduction steps and exact error text.
+5. Whether this blocks individual use or team rollout.
+
+## Response Windows (Best Effort)
+
+- Installation/blocker bugs: initial response target within 2 business days.
+- Non-blocking bugs: initial response target within 5 business days.
+- Feature requests: triaged in backlog batches.
+
+## Solo Maintainer Capacity Guardrail
+
+- Weekly support budget target: <= 2 hours/week.
+- If inbound support exceeds this cap, new feature work may be paused.
+- High-context requests may be deferred until reproducible artifacts are provided.
+
+## Security and Data Handling
+
+- Do not post raw tokens/cookies in issues.
+- Use redacted logs.
+- If credentials are exposed, rotate immediately and update issue with redaction.
+
+## Deployment Escalation Rule
+
+For team/hosted usage, open a deployment intake issue before broad rollout.

package/docs/TROUBLESHOOTING.md

@@ -54,10 +54,13 @@ slack_list_conversations limit=50
 # Option 1: In Claude Code/Desktop
 slack_refresh_tokens
 
-# Option 2: CLI
+# Option 2: Package setup wizard
+npx -y @jtalk22/slack-mcp --setup
+
+# Option 3: Repo CLI
 npm run tokens:auto
 
-# Option 3: Manual
+# Option 4: Manual
 npm run tokens:refresh
 ```
 

package/docs/USE_CASE_RECIPES.md

@@ -0,0 +1,69 @@
+# Use Case Recipes
+
+Copy and paste any prompt into your MCP client. Each recipe maps to existing tools and parameters.
+
+## 1) Fast Health Check
+
+Prompt:
+`Run slack_health_check and tell me if my workspace connection is valid.`
+
+## 2) Token Age and Cache Snapshot
+
+Prompt:
+`Run slack_token_status and summarize token age, health, and cache stats.`
+
+## 3) List Recent DMs
+
+Prompt:
+`Use slack_list_conversations with types="im,mpim" and limit=50. Return names and IDs.`
+
+## 4) Summarize a Channel for the Last 3 Days
+
+Prompt:
+`Use slack_conversations_history with channel_id="<CHANNEL_ID>", oldest="<UNIX_TS_3_DAYS_AGO>", limit=100, resolve_users=true, then summarize decisions and action items.`
+
+## 5) Pull a Full Thread
+
+Prompt:
+`Use slack_get_thread with channel_id="<CHANNEL_ID>" and thread_ts="<THREAD_TS>". Summarize timeline and owners.`
+
+## 6) Search for Decisions
+
+Prompt:
+`Use slack_search_messages with query="decision OR approved after:2026-01-01" and count=50. Group results by channel.`
+
+## 7) Find Messages from One Person
+
+Prompt:
+`Use slack_search_messages with query="from:@<USERNAME> after:2026-01-01" and count=30. Return top themes.`
+
+## 8) Export Conversation History
+
+Prompt:
+`Use slack_get_full_conversation with channel_id="<CHANNEL_ID>", max_messages=2000, include_threads=true, output_file="q1-export.json".`
+
+## 9) Lookup a User Profile
+
+Prompt:
+`Use slack_users_info with user_id="<USER_ID>" and return role, timezone, and status fields.`
+
+## 10) Send a Channel Update
+
+Prompt:
+`Use slack_send_message with channel_id="<CHANNEL_ID>" and text="Daily update: build passed, deploy at 4 PM ET."`
+
+## 11) Reply in a Thread
+
+Prompt:
+`Use slack_send_message with channel_id="<CHANNEL_ID>", thread_ts="<THREAD_TS>", text="Acknowledged. I will post follow-up logs in 30 minutes."`
+
+## 12) Directory Snapshot
+
+Prompt:
+`Use slack_list_users with limit=500. Return a compact list of users with admin/bot flags.`
+
+## Notes
+
+- Replace placeholders before running (`<CHANNEL_ID>`, `<THREAD_TS>`, `<USER_ID>`, `<USERNAME>`, timestamps).
+- Timestamp parameters are Unix seconds in string form.
+- For large workspaces, start with smaller limits, then expand.

package/docs/WEB-API.md

@@ -7,6 +7,8 @@ The Slack Web Server exposes all MCP tools as REST endpoints, accessible from an
 ```bash
 cd ~/slack-mcp-server
 npm run web
+# Or run directly from npm:
+npx -y @jtalk22/slack-mcp web
 ```
 
 The server will:

package/docs/assets/icon.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A154B"/>
+      <stop offset="100%" style="stop-color:#3D1140"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background rounded square -->
+  <rect x="0" y="0" width="512" height="512" rx="96" ry="96" fill="url(#bg)"/>
+
+  <!-- Stylized hashtag/channel symbol -->
+  <g fill="none" stroke="#FFFFFF" stroke-width="36" stroke-linecap="round">
+    <!-- Vertical lines -->
+    <line x1="180" y1="140" x2="160" y2="372"/>
+    <line x1="352" y1="140" x2="332" y2="372"/>
+    <!-- Horizontal lines -->
+    <line x1="120" y1="200" x2="392" y2="200"/>
+    <line x1="120" y1="312" x2="392" y2="312"/>
+  </g>
+
+  <!-- Slack-colored connection dots (representing MCP bridge) -->
+  <circle cx="420" cy="92" r="28" fill="#36C5F0"/>
+  <circle cx="92" cy="420" r="28" fill="#2EB67D"/>
+  <circle cx="420" cy="420" r="28" fill="#ECB22E"/>
+  <circle cx="92" cy="92" r="28" fill="#E01E5A"/>
+</svg>

package/docs/images/diagram-oauth-comparison.svg

@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 420">
+  <defs>
+    <linearGradient id="bgGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e"/>
+      <stop offset="100%" style="stop-color:#16213e"/>
+    </linearGradient>
+    <marker id="arrowRed2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L9,3 z" fill="#e94560"/>
+    </marker>
+    <marker id="arrowTeal2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <path d="M0,0 L0,6 L9,3 z" fill="#4ecdc4"/>
+    </marker>
+  </defs>
+
+  <!-- Background -->
+  <rect width="900" height="420" fill="url(#bgGrad2)" rx="12"/>
+
+  <!-- Left Side: OAuth (Red-tinted) -->
+  <rect x="30" y="50" width="400" height="340" rx="12" fill="#e94560" opacity="0.1" stroke="#e94560" stroke-width="2"/>
+  <text x="230" y="85" text-anchor="middle" fill="#fca5a5" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600">Official Slack API (OAuth)</text>
+
+  <!-- OAuth Flow - Row 1 -->
+  <rect x="45" y="110" width="120" height="45" rx="8" fill="#2d2d2d" stroke="#e94560" stroke-width="1"/>
+  <text x="105" y="138" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12">Create App</text>
+
+  <path d="M 170 132 L 190 132" stroke="#e94560" stroke-width="2" marker-end="url(#arrowRed2)"/>
+
+  <rect x="195" y="110" width="120" height="45" rx="8" fill="#2d2d2d" stroke="#e94560" stroke-width="1"/>
+  <text x="255" y="138" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12">Request Scopes</text>
+
+  <path d="M 320 132 L 340 132" stroke="#e94560" stroke-width="2" marker-end="url(#arrowRed2)"/>
+
+  <rect x="345" y="110" width="75" height="45" rx="8" fill="#e94560" opacity="0.4" stroke="#e94560" stroke-width="1"/>
+  <text x="382" y="128" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600">Admin</text>
+  <text x="382" y="144" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600">Approval</text>
+
+  <!-- Arrow down from Admin Approval -->
+  <path d="M 382 160 L 382 195" stroke="#e94560" stroke-width="2" marker-end="url(#arrowRed2)"/>
+
+  <!-- OAuth Flow - Row 2 -->
+  <rect x="95" y="205" width="140" height="45" rx="8" fill="#2d2d2d" stroke="#e94560" stroke-width="1"/>
+  <text x="165" y="233" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12">User Authorization</text>
+
+  <path d="M 240 227 L 260 227" stroke="#e94560" stroke-width="2" marker-end="url(#arrowRed2)"/>
+
+  <rect x="265" y="205" width="140" height="45" rx="8" fill="#2d2d2d" stroke="#e94560" stroke-width="1"/>
+  <text x="335" y="233" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12">Limited Access</text>
+
+  <!-- OAuth Result (blocked) -->
+  <rect x="70" y="280" width="290" height="60" rx="8" fill="#e94560" opacity="0.15" stroke="#e94560" stroke-width="2" stroke-dasharray="4"/>
+  <text x="215" y="305" text-anchor="middle" fill="#fca5a5" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500">No DMs without</text>
+  <text x="215" y="325" text-anchor="middle" fill="#fca5a5" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500">per-conversation consent</text>
+
+  <!-- Right Side: Session Mirroring (Green-tinted) -->
+  <rect x="470" y="50" width="400" height="340" rx="12" fill="#4ecdc4" opacity="0.1" stroke="#4ecdc4" stroke-width="2"/>
+  <text x="670" y="85" text-anchor="middle" fill="#5eead4" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600">Session Mirroring</text>
+
+  <!-- Session Mirroring Flow -->
+  <rect x="495" y="120" width="160" height="50" rx="8" fill="#3b82f6" opacity="0.9"/>
+  <text x="575" y="150" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="500">Open Slack in Chrome</text>
+
+  <path d="M 660 145 L 700 145" stroke="#4ecdc4" stroke-width="3" marker-end="url(#arrowTeal2)"/>
+
+  <rect x="705" y="120" width="140" height="50" rx="8" fill="#da7756" opacity="0.9"/>
+  <text x="775" y="150" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="500">Mirror Session</text>
+
+  <path d="M 775 175 L 775 210" stroke="#4ecdc4" stroke-width="3" marker-end="url(#arrowTeal2)"/>
+
+  <rect x="605" y="220" width="160" height="50" rx="8" fill="#4ecdc4" opacity="0.9"/>
+  <text x="685" y="250" text-anchor="middle" fill="#1a1a2e" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600">Full Access</text>
+
+  <!-- Session Mirroring Result (success) -->
+  <rect x="510" y="295" width="340" height="60" rx="8" fill="#4ecdc4" opacity="0.2" stroke="#4ecdc4" stroke-width="2"/>
+  <text x="680" y="320" text-anchor="middle" fill="#5eead4" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="500">Your DMs, Channels, Search, History</text>
+  <text x="680" y="340" text-anchor="middle" fill="#5eead4" font-family="system-ui, -apple-system, sans-serif" font-size="11">✓ Same access as your browser</text>
+
+  <!-- VS divider -->
+  <circle cx="450" cy="210" r="24" fill="#1a1a2e" stroke="#ffffff" stroke-width="2" opacity="0.9"/>
+  <text x="450" y="216" text-anchor="middle" fill="#ffffff" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700">vs</text>
+</svg>