Pawprint Wrapper

👋 Quick Start

This is a standalone demo of the Pawprint Wrapper sidebar. Click the toggle button on the right edge of the screen, or press Ctrl + Shift + P to open the sidebar.

🎯 Features

Quick Login: Switch between test users with one click
Environment Info: See current backend/frontend URLs
JWT Token Management: Automatic token storage and refresh
Keyboard Shortcuts: Ctrl+Shift+P to toggle
Persistent State: Sidebar remembers expanded/collapsed state

👤 Test Users

Try logging in as one of these test users (from config.json):

👑 Admin - admin@test.com / Amar2025!
🩺 Vet 1 - vet@test.com / Amar2025!
🐶 Tutor 1 - tutor@test.com / Amar2025!

Note: In this demo, login will fail because there's no backend running. When integrated with a real AMAR instance, clicking a user card will:

Call POST /api/token/ with username/password
Store access & refresh tokens in localStorage
Reload the page with the user logged in

🔧 How It Works

The sidebar is implemented as three files:

sidebar.css - Visual styling (dark theme, animations)
sidebar.js - Logic (login, logout, toggle, state management)
config.json - Configuration (users, URLs, nest info)

To integrate with your app, simply include these in your HTML:


          <link rel="stylesheet" href="/wrapper/sidebar.css">

          <script src="/wrapper/sidebar.js"></script>

🚀 Next Steps

Planned enhancements:

📋 Jira Info Panel: Fetch and display ticket details from artery
📊 Logs Viewer: Stream container logs via WebSocket
🎨 Theme Switcher: Light/dark theme toggle
🔍 Search: Quick search across users and tools
⚙️ Settings: Customize sidebar behavior

📚 Documentation