Interface Features

This page provides a detailed introduction to each interface element and function of GrindMate.

Overall Layout

┌─────────────────────────────────────────────────────┐
│           Console (Metrics + Token)                  │
├──────────────────────┬──────────────────────────────┤
│                      │                              │
│   Real-time          │      To-Do Panel              │
│   Conversation       │      (Right side)             │
│   (Left side)        │                              │
│                      │                              │
└──────────────────────┴──────────────────────────────┘

🎛️ Console (Top of Page)

The console is the command center of the entire system, displaying key metrics and Token information.

Metric Cards

5 metric cards displayed side by side, updating system status in real-time:

• To-Do Items - Shows 3/5 (3 of 5 tasks completed)
• Execution Rounds - Number of AI thinking and execution cycles
• Search Count - Number of internet searches performed
• Final Deliverables - Number of deliverable files generated
• Remaining Count - How many uses left in your Token

Token Input Box

• Function: Input your usage credential
• Auto-verification of validity
• Display remaining count

💬 Real-time Conversation (Bottom Left Card)

Status Bar

Shows current system working status:

• 🟢 Not Started - Waiting for input
• 🔵 Executing - AI is working
• 🟢 Standby - Task complete, can continue
• 🔴 Error Occurred - Problem encountered
• 🟢 Task Completed - Full workflow finished

Conversation Area

• Your Messages - White bubbles
• AI Replies - Blue-green gradient bubbles with round indicators, stage info, tool calls, and response content

Input Box

• Multi-line text input
• Shortcuts: Ctrl+Enter (Windows) or Cmd+Enter (Mac)
• Auto-save draft

📋 To-Do Items (Right Panel)

Progress Bar

Visual progress indicator showing percentage and completion count.

Task List

Tasks grouped by work stages:

• ☐ Not Started - Gray border, empty checkbox
• 🔄 In Progress - Blue border, loading animation
• ☑ Completed - Green border, checkmark, strikethrough

Bottom Buttons

• View Deliverables - Open file preview window
• New Conversation - Start fresh conversation
• Stop - Abort AI execution

📦 Deliverables Preview Window

File List (Left)

• File type icon
• File name
• File size
• Generation time (on hover)

Preview Area (Right)

Different preview effects based on file type:

• Markdown - Rendered layout
• Code - Syntax highlighting
• JSON/CSV - Formatted display
• Images - Original display
• PDF - Embedded reader

Download Features

• Download Current - Download the file being viewed
• Download All - Package all files as ZIP

Next Steps

• 💬 Conversation Guide - Master conversation skills
• 📋 To-Do List - Understand task management
• 📦 Deliverables - Learn to view and download

Now that you're familiar with the interface, let's learn how to use it efficiently! 💡