Skip to content

User Interface

Arif Dogan edited this page Mar 4, 2025 · 1 revision

User Interface Guide

LLMDog features a Terminal User Interface (TUI) based on the [Bubble Tea](https://github.com/charmbracelet/bubbletea) framework. This guide will help you understand how to navigate and use the interface effectively.

Main Interface Components

The LLMDog interface consists of several key components:

  1. Header: Shows the application name and basic info
  2. File List: Displays the navigable file and directory structure
  3. Preview Pane: Shows a preview of the selected file's content
  4. Status Bar: Displays information about your selection, search mode, and keyboard shortcuts

LLMDog Interface Layout

Navigation and Controls

Basic Navigation

  • ↑/↓ (Up/Down Arrow Keys): Navigate through the file list
  • Tab: Select or unselect the currently highlighted item
  • Space: Expand or collapse a directory
  • Enter: Confirm your selection and generate the Markdown output
  • q: Quit the application
  • Esc: Clear filter/errors, exit dialogs

File Selection

  • Tab: Toggle selection of the currently highlighted item
  • Ctrl+A: Select all visible items
  • Ctrl+D: Deselect all items
  • Space (on a directory): Expand/collapse the directory

When a directory is selected:

  • All non-ignored files within it will be selected recursively
  • Gitignored files will be skipped even if the parent directory is selected

Display Controls

  • Ctrl+/: Toggle the preview pane on/off
  • / (Forward Slash): Activate search/filter mode
  • Ctrl+S: Toggle between filename search and content search modes

Bookmark Controls

  • Ctrl+B: Open the bookmarks menu
  • Ctrl+Shift+B: Save current selection as a bookmark

Visual Indicators

LLMDog uses several visual indicators to help you understand the state of files:

File Icons

  • 📁: Directory
  • 📄: Regular file
  • File-specific icons based on file extension (e.g., 🔹 for Go files, 🐍 for Python)

Selection Status

  • [ ]: Unselected item
  • [✓]: Selected item

Directory Expansion

  • : Collapsed directory
  • : Expanded directory

Special Indicators

  • 🔍: Content match indicator (when an item matches content search)
  • Faded text: Gitignored files
  • Colorful highlighting: Current cursor position

Search and Filter

The search functionality lets you quickly find files:

  1. Press / to activate search mode
  2. Type your search query
  3. Press Enter to confirm

Search modes:

  • Filename Search (default): Searches only in filenames
  • Content Search: Searches within file contents as well
    • Toggle with Ctrl+S
    • Content matches show a 🔍 indicator

When in search mode:

  • The status bar indicates which search mode is active
  • Up/Down arrows navigate through search history
  • Escape clears the current search

Status Bar Information

The status bar at the bottom provides important information:

  • Left Section: Shows stats about your selection

    • Number of selected files
    • Total size of selected files
    • Estimated token count
    • Number of bookmarks
  • Middle Section: Shows current search mode

    • "Filename Search" or "Content Search"
  • Right Section: Shows contextual keyboard shortcuts

Bookmarks Menu

When you press Ctrl+B, the bookmarks menu appears:

  • Navigate with the Up/Down arrow keys
  • Enter: Apply the selected bookmark
  • n: Create a new bookmark
  • d: Delete the selected bookmark
  • r: Rename the selected bookmark
  • i: Edit bookmark description
  • Esc: Close the bookmarks menu

Error Messages

If something goes wrong, an error message will appear at the bottom of the screen. Press Esc to dismiss error messages.

Status Messages

Temporary status messages appear in the status bar to provide feedback on your actions, such as:

  • Confirming a bookmark was saved
  • Showing search results count
  • Indicating when content search mode is toggled

File Preview

The preview pane (toggle with Ctrl+/) shows:

  • For files: Content preview with basic syntax highlighting
  • For directories: Summary of directory contents

Preview information includes:

  • File/directory path
  • Size information
  • For files: Content preview
  • For directories: List of items and file type summary

Dialog Boxes

LLMDog shows dialog boxes for interactions like:

  • Creating a new bookmark
  • Renaming a bookmark
  • Adding a bookmark description

Navigate dialogs with:

  • Type to enter text
  • Enter: Confirm/Save
  • Esc: Cancel/Close

Clone this wiki locally