MCP Filesystem Assistant
- filesystem-mcp-with-FastMCP-server
- host
- __pycache__
ui_components.cpython-313.pyc•18 kB
�
>�Qi�< � �L � S r SSKrSSKJr SSKJr SSKJrJr " S S5 r g)zF
UI Components - Reusable Streamlit Components with Clean Light Theme
� N)�Path)�datetime)�List�Dictc �
� \ rS rSrSr\S 5 r\S 5 r\S\S\ 4S j5 r
\S\ S \ 4S
j5 r
\S \\ 4S j5 r\S
\ S\ 4S j5 r\S\\ 4S j5 r\S 5 r\S\ S\\ 4S j5 r\S 5 rSrg)� UIComponents�
z1Reusable UI components for Streamlit application.c �. � [ R " SSS9 g)z0Inject custom CSS for clean, simple light theme.a!"
<style>
/* ===== CLEAN LIGHT THEME ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Main background - Simple white */
html, body, [data-testid="stApp"] {
background: #ffffff;
color: #1a1a1a !important;
}
/* Sidebar - Light gray */
[data-testid="stSidebar"] {
background: #f8f9fa;
border-right: 2px solid #e9ecef;
}
[data-testid="stSidebar"] [data-testid="stMarkdownContainer"] {
color: #1a1a1a !important;
}
/* Main content area */
.main .block-container {
padding-top: 2rem;
padding-bottom: 2rem;
background: #ffffff;
}
/* Headers */
.main-header {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
text-align: center;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.sub-header {
font-size: 1.1rem;
color: #666666;
text-align: center;
margin-bottom: 2rem;
font-weight: 400;
}
/* Chat messages - Simple boxes with clear colors */
.chat-user {
background: #e3f2fd;
color: #1a1a1a;
padding: 1rem 1.25rem;
border-radius: 8px;
margin: 0.75rem 0;
border-left: 4px solid #2196f3;
}
.chat-assistant {
background: #f1f8e9;
color: #1a1a1a;
padding: 1rem 1.25rem;
border-radius: 8px;
margin: 0.75rem 0;
border-left: 4px solid #4caf50;
}
/* Tool calls */
.tool-call {
background: #fff9e6;
color: #1a1a1a;
padding: 0.75rem 1rem;
border-radius: 6px;
margin: 0.5rem 0;
font-family: 'SF Mono', 'Monaco', monospace;
font-size: 0.9rem;
border-left: 3px solid #ffa726;
}
/* Buttons - Simple and clean */
.stButton > button {
border-radius: 6px;
font-weight: 500;
border: 2px solid #e0e0e0;
background: #ffffff;
color: #1a1a1a;
transition: all 0.2s ease;
}
.stButton > button:hover {
border-color: #2196f3;
background: #f5f5f5;
}
/* Input fields - High contrast */
.stTextInput > div > div > input,
.stTextArea > div > div > textarea {
background-color: #ffffff !important;
color: #1a1a1a !important;
border: 2px solid #d0d0d0 !important;
border-radius: 6px !important;
padding: 0.75rem !important;
}
.stTextInput > div > div > input:focus,
.stTextArea > div > div > textarea:focus {
border-color: #2196f3 !important;
outline: none !important;
}
/* Tabs - Clean separation */
.stTabs [data-baseweb="tab-list"] {
gap: 0.5rem;
background: transparent;
border-bottom: 2px solid #e0e0e0;
}
.stTabs [data-baseweb="tab"] {
border-radius: 6px 6px 0 0;
background: #f5f5f5;
border: 2px solid #e0e0e0;
border-bottom: none;
padding: 0.5rem 1.5rem;
font-weight: 500;
color: #666666;
}
.stTabs [aria-selected="true"] {
background: #ffffff;
color: #1a1a1a !important;
border-color: #e0e0e0;
border-bottom: 2px solid #ffffff;
margin-bottom: -2px;
}
/* Expanders - Simple boxes */
.streamlit-expanderHeader {
background: #f8f9fa;
border-radius: 6px;
border: 2px solid #e0e0e0;
font-weight: 500;
color: #1a1a1a;
}
.streamlit-expanderHeader:hover {
background: #f0f0f0;
}
/* Status indicators - Clear and visible */
.stSuccess {
background: #e8f5e9;
border-left: 4px solid #4caf50;
border-radius: 6px;
color: #1b5e20;
padding: 1rem;
}
.stError {
background: #ffebee;
border-left: 4px solid #f44336;
border-radius: 6px;
color: #b71c1c;
padding: 1rem;
}
.stWarning {
background: #fff3e0;
border-left: 4px solid #ff9800;
border-radius: 6px;
color: #e65100;
padding: 1rem;
}
.stInfo {
background: #e3f2fd;
border-left: 4px solid #2196f3;
border-radius: 6px;
color: #0d47a1;
padding: 1rem;
}
/* Dataframes */
.stDataFrame {
border-radius: 6px;
overflow: hidden;
border: 2px solid #e0e0e0;
}
.stDataFrame [data-testid="stDataFrameResizable"] {
background-color: #ffffff !important;
}
/* Metrics */
[data-testid="stMetricValue"] {
color: #1a1a1a !important;
font-weight: 600;
font-size: 1.5rem !important;
}
[data-testid="stMetricLabel"] {
color: #666666 !important;
font-weight: 500;
}
/* Dividers */
hr {
margin: 1.5rem 0;
border: none;
height: 2px;
background: #e0e0e0;
}
/* Code blocks */
.stCodeBlock {
border-radius: 6px;
border: 2px solid #e0e0e0;
background: #f8f9fa;
}
code {
background: #f0f0f0 !important;
color: #1a1a1a !important;
border-radius: 4px;
padding: 0.2rem 0.4rem;
font-weight: 500;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background: #bdbdbd;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #9e9e9e;
}
/* Selectbox */
.stSelectbox > div > div {
background-color: #ffffff !important;
border: 2px solid #d0d0d0 !important;
border-radius: 6px !important;
color: #1a1a1a !important;
}
/* Better text contrast */
p, span, div {
color: #1a1a1a !important;
}
/* Sidebar text */
[data-testid="stSidebar"] p,
[data-testid="stSidebar"] span,
[data-testid="stSidebar"] div {
color: #1a1a1a !important;
}
/* Headers in sidebar */
[data-testid="stSidebar"] h1,
[data-testid="stSidebar"] h2,
[data-testid="stSidebar"] h3 {
color: #1a1a1a !important;
}
/* Make captions more visible */
.caption, [data-testid="stCaptionContainer"] {
color: #666666 !important;
font-size: 0.9rem;
}
</style>
T��unsafe_allow_htmlN��st�markdown� � �<C:\Users\CHAKOR\filesystem-mcp-project\host\ui_components.py�render_custom_css� UIComponents.render_custom_css
s � � � � � Y �r $�sY %r c �X � [ R " SSS9 [ R " SSS9 g)zRender application header.u? <div class="main-header">🗂️ MCP Filesystem Assistant</div>Tr zT<div class="sub-header">AI-Powered File Management with Model Context Protocol</div>Nr
r r r �
render_header�UIComponents.render_header+ s+ � � � � �U�im�n�
� � �j� C� Dr � is_connected�
server_urlc �� � U ( a1 [ R " S5 [ R " SU S35 g[ R " S5 [ R " S5 g)z}
Render server connection status.
Args:
is_connected: Whether server is connected
server_url: Server URL to display
u ✅ MCP Server Connectedu 📡 **Server:** `�`u ❌ MCP Server DisconnectedzH**Start the server:**
```bash
python server/filesystem_mcp_server.py
```N)r �success�info�error�warning)r r s r �render_connection_status�%UIComponents.render_connection_status1 sH � � � �J�J�1� 2� �G�G�(�� �A�6� 7� �H�H�2� 3� �J�J��
r �workspace_path�
file_countc �f � [ R " SU S35 [ R " SU5 g)z�
Render workspace information.
Args:
workspace_path: Path to workspace directory
file_count: Number of files in workspace
u **📁 Location:**
`r u 📊 Files/FoldersN)r r �metric)r" r# s r �render_workspace_info�"UIComponents.render_workspace_infoF s* � � ���'��'7�q�9�:�
� � �&�
�3r �toolsc � � [ R " S[ U 5 S35 [ R " SSS9 [ U S5 Hu u p[ R
" SU SUS S35 [ R " S
UR S S 5 35 U[ U 5 : d M_ [ R
" S
5 Mw SSS5 g! , ( d f g= f)zF
Render available tools list.
Args:
tools: List of tool metadata
u ✨ **z tools loaded**u 🔍 View All ToolsF��expanded� z**�. �nameu 📝 � descriptionzNo descriptionz---N)r r �len�expander� enumerater �caption�get)r( �i�tools r �render_tools_list� UIComponents.render_tools_listR s� � � ���&��U�� �O�4�5�
�[�[�.��
?�$�U�A�.���� � �b���2�d�6�l�^�2� 6�7��
�
�U�4�8�8�M�;K�#L�"M�N�O��s�5�z�>��K�K��&� /� @�
?�
?�s �A(C�%C�
C�role�contentc � � U S:X a [ R " SU S3SS9 gU S:X a [ R " SU S3SS9 gg) zd
Render a chat message.
Args:
role: Message role (user/assistant)
content: Message content
�useru. <div class="chat-user">👤 <b>You</b><br><br>z</div>Tr � assistantu9 <div class="chat-assistant">🤖 <b>Assistant</b><br><br>Nr
)r9 r: s r �render_chat_message� UIComponents.render_chat_messageb sQ � � �6�>� �K�K�@�� ��P�"&�
� �[�
� �K�K�K�G�9�TZ�[�"&�
� !r �
tool_callsc �~ � U ( a� [ R " S[ U 5 S3SS9 [ U S5 Hc u pSR US R 5 VVs/ s H u p4U SU 3PM snn5 n[ R " S U S
US S U S
3SS9 Me SSS5 ggs snnf ! , ( d f g= f)zR
Render tool calls in an expander.
Args:
tool_calls: List of tool calls made
u 🔧 Tools Used (�)Tr* r, z, � arguments�=u <div class="tool-call">🛠️ r- r. �(z)</div>r N)r r1 r0 r2 �join�itemsr )r@ r5 r6 �k�v�args_strs r �render_tool_calls� UIComponents.render_tool_callsv s� � � ���� 0��Z� �0A�� C�d�S� (��Q� 7�G�A� #�y�y��k�AR�AX�AX�AZ�)[�AZ���Q�C�q���*�AZ�)[� \�H��K�K�9�!��B�t�F�|�n�A�h�Z�W^�_�*.�� 8� T�S� �� *\� T�S�s �3B.� B(�0.B.�(B.�.
B<c �� � [ R " S5 [ R " S5 u pnSSSS.nSnU [ R " SS S
S 9( a US nSSS5 U [ R " S S S
S 9( a US nSSS5 U [ R " SS SS 9( a US nSSS5 U$ ! , ( d f Nf= f! , ( d f NL= f! , ( d f U$ = f)z Render example prompt buttons.u ### 💡 Try these examples:� z List all files in the workspacez Read the contents of notes.txtz5Create a file called hello.txt with 'Hello from MCP!')� 📋 List files� 📝 Read notes� 📄 Create fileNrO T�ex1)�use_container_width�keyrP �ex2rQ �ex3)r r �columns�button)�col1�col2�col3�examples�clickeds r �render_example_prompts�#UIComponents.render_example_prompts� s� � � � � �2�3� �:�:�a�=���D� A� ?� W�
�� ��
��y�y�*��%�P�"�#4�5�� � ��y�y�*��%�P�"�#4�5�� � ��y�y�+��5�Q�"�#5�6�� � �� �T�� �T�� �T� ��s# �!B;�%!C �!C �;
C �
C�
C,�returnc � � / nU R 5 H� nUR 5 nUR UR UR 5 ( a SOSUR
S: a UR
S S3OUR
S- S S3[ R " UR 5 R S5 S .5 M� [ US
S 9$ ! [ a / s $ f = f) z�
Get list of files in workspace.
Args:
workspace_path: Path to workspace directory
Returns:
List of file metadata dictionaries
� 📂u 📄i �,z bytesz.1fz KBz%Y-%m-%d %H:%M)r. �type�size�modifiedc � � U S S:g U S 4$ )Nrd rb r. r )�xs r �<lambda>�3UIComponents.list_workspace_files.<locals>.<lambda>� s � ��&� �V�0C�Q�v�Y�/Or )rT ) �iterdir�stat�appendr. �is_dir�st_sizer �
fromtimestamp�st_mtime�strftime�sorted� Exception)r" �files�itemrl s r �list_workspace_files�!UIComponents.list_workspace_files� s� � � ��E�&�.�.�0���y�y�{��� � � �I�I�&*�k�k�m�m�F��9=� � ��9L�t�|�|�A� .�f� 5�UY�Ua�Ua�bf�Uf�gj�Tk�kn�Ro� (� 6� 6�t�}�}� E� N� N�O_� `� � � 1� �%�%O�P� P��� ��I� �s �CC � C�Cc �X � [ R " 5 [ R " SSS9 g)zRender application footer.u
<div style="text-align: center; color: #666666; padding: 1.5rem; font-size: 0.9rem;">
<p style="margin: 0.5rem 0;">
Built with ❤️ using <b style="color: #1a1a1a;">FastMCP</b>,
<b style="color: #1a1a1a;">OpenAI</b>, and
<b style="color: #1a1a1a;">Streamlit</b>
</p>
<p style="margin: 0.5rem 0; font-size: 0.85rem;">
🔒 All operations are securely sandboxed to the workspace directory
</p>
</div>
Tr N)r �dividerr r r r �
render_footer�UIComponents.render_footer� s# � � �
�
� �
� � � � $� %r r N)�__name__�
__module__� __qualname__�__firstlineno__�__doc__� staticmethodr r �bool�strr r �intr& r r r7 r> rK r^ rw r{ �__static_attributes__r r r r r
s" � �;��[%� �[%�z �D� �D�
��t� �� � ��( � 4�d� 4�� 4� � 4� �
'��d��
'� �
'� ��#� �� � ��& ��d�4�j� � �� �� ��0 ��T� �d�4�j� � ��0 �%� �%r r )
r� � streamlitr �pathlibr r �typingr r r r r r �<module>r� s$ ��� � � � �~%� ~%r
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/chakorabdellatif/filesystem-mcp-with-FastMCP-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server