EchoTrace is a modern, branchable AI conversation system built with Vue.js 3, TypeScript, Quasar, and FastAPI. It allows you to fork conversations at any point, explore multiple AI-generated paths, and trace your thinking over time with an intuitive tree-based interface.

• 🌳 Interactive Tree Visualization - Drag, zoom, and navigate conversation trees with Vue Flow
• 🧠 Contextual Memory - Maintain full conversation history across branches
• 🔀 Branching Conversations - Fork from any message to explore alternative paths
• 📱 Responsive Design - Mobile-first design with Quasar components
• 🎨 Modern UI/UX - Clean, intuitive interface with dark/light themes
• ⚡ Real-time Updates - Instant updates with Pinia state management
• 🔍 Search & Filter - Find specific messages or branches quickly
• 📤 Export/Import - Save conversations in multiple formats
• ⌨️ Keyboard Shortcuts - Power user features for efficiency

• Vue.js 3 with Composition API
• TypeScript for type safety
• Quasar Framework for UI components
• Vue Flow for interactive tree visualization
• Pinia for state management
• Vite for fast development and building

• FastAPI for high-performance API
• SQLAlchemy for database ORM
• SQLite for local data storage
• OpenAI API for AI responses
• Pydantic for data validation

• Node.js 18+ and npm
• Python 3.9+
• OpenAI API key

1. Clone and setup

   git clone <repository-url>
   cd echotrace

2. Setup backend

   cd backend
   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   pip install -r requirements.txt
   cp .env.example .env
   # Edit .env and add your OPENAI_API_KEY

3. Setup frontend

   cd ../frontend
   npm install

4. Start both servers

   # From project root
   ./start.sh

   Or start manually:

   # Terminal 1 - Backend
   cd backend
   source venv/bin/activate
   python run.py
   
   # Terminal 2 - Frontend  
   cd frontend
   npm run dev

5. Open your browser

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:8000
   • API Docs: http://localhost:8000/docs

echotrace/
├── frontend/                 # Vue.js frontend
│   ├── src/
│   │   ├── components/      # Vue components
│   │   ├── stores/         # Pinia stores
│   │   ├── services/       # API services
│   │   ├── types/          # TypeScript types
│   │   └── utils/          # Utility functions
│   └── package.json
├── backend/                 # FastAPI backend
│   ├── app/                # Main application
│   ├── database/           # Database models and setup
│   ├── schemas/            # Pydantic schemas
│   ├── services/           # Business logic
│   └── requirements.txt
└── README.md

• Conversations are the top-level containers
• Each conversation has multiple branches
• Branches represent different conversation paths
• Only one branch is "active" at a time

• Nodes are individual messages in a conversation
• Each node can have a user message, AI response, or both
• Nodes are connected in a tree structure
• You can branch from any node to create alternative paths

• Click any message to create a new branch
• Branches inherit the conversation history up to that point
• Switch between branches to explore different paths
• Each branch maintains its own conversation flow

1. Click the "+" button in the sidebar
2. Enter a conversation title
3. Start chatting with the AI

1. Click the tree icon (🌱) next to any message
2. Enter a branch name
3. Continue the conversation from that point

• Use the tree view to see the full conversation structure
• Click nodes to jump to specific messages
• Switch between branches using the branch panel
• Use zoom controls to navigate large trees

• Ctrl/Cmd + N - New conversation
• Ctrl/Cmd + B - Create branch from current message
• Ctrl/Cmd + K - Focus search
• Ctrl/Cmd + D - Toggle dark mode

cd frontend
npm run dev          # Start dev server
npm run build        # Build for production
npm run type-check   # Run TypeScript checks

cd backend
source venv/bin/activate
python run.py        # Start with auto-reload

The app uses SQLite by default. The database file is created automatically at backend/echotrace.db.

To reset the database:

rm backend/echotrace.db
# Restart the backend server

# Build frontend
cd frontend
npm run build

# Serve with a static file server
npx serve dist

# Build and run with Docker Compose
docker-compose up --build

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

MIT License - see LICENSE file for details

• Built with Vue.js
• UI components by Quasar
• Tree visualization by Vue Flow
• Backend powered by FastAPI
• AI responses by OpenAI

EchoTrace - Branch your thoughts, explore your ideas. 🌿