From 54e9957ec5e39ff422a0a37182c3fb335c51bb4a Mon Sep 17 00:00:00 2001
From: David Soria Parra <davidsp@anthropic.com>
Date: Wed, 18 Dec 2024 11:39:24 +0000
Subject: [PATCH] feat: add help and debug links to sidebar

---
 README.md                         |  2 +-
 client/src/components/Sidebar.tsx | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c5e6b2e..b02f1b1 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ The inspector runs both a client UI (default port 5173) and an MCP proxy server
 CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
 ```
 
-For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector).
+For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
 
 ### From this repository
 
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 266f98e..17a4174 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Play, ChevronDown, ChevronRight } from "lucide-react";
+import { Play, ChevronDown, ChevronRight, CircleHelp, Bug } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -220,7 +220,7 @@ const Sidebar = ({
         </div>
       </div>
       <div className="p-4 border-t">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center justify-between">
           <Select
             value={theme}
             onValueChange={(value: string) =>
@@ -236,6 +236,19 @@ const Sidebar = ({
               <SelectItem value="dark">Dark</SelectItem>
             </SelectContent>
           </Select>
+
+          <div className="flex items-center space-x-2">
+            <a href="https://modelcontextprotocol.io/docs/tools/inspector" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" title="Inspector Documentation">
+                <CircleHelp className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a href="https://modelcontextprotocol.io/docs/tools/debugging" target="_blank" rel="noopener noreferrer">
+              <Button variant="ghost" title="Debugging Guide">
+                <Bug className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+          </div>
         </div>
       </div>
     </div>