Web Dashboard

Explore Flanner's beautiful browser-based interface for managing plan files with markdown rendering, version history, and responsive design.

Launching the Web Interface

# Start the web server flanner web # Or with auto-open browser flanner web --open-browser # Custom port flanner web --port 3000

Access at: http://localhost:8080

Features

Dashboard (/)

The dashboard provides an overview of all your projects:

• Project Statistics - Total projects, plan files, recent updates
• Project Cards - Grid view of all projects with metadata
• Recent Activity - Timeline of latest changes
• Quick Actions - Create new projects and plans

Projects (/projects)

Manage all your projects:

• Table View - All projects with metadata
• Search & Filter - Find projects quickly
• Create Project - Form with git integration
• Project Configuration - Manage plan directory settings

Project Detail (/projects/{id})

View detailed information about a project:

• Project Information - Root path, plan directory, settings
• Plan Files List - All plans with version badges
• Quick Actions - View, edit, history for each plan
• Create Plan - Add new plan files

Plan File Viewer (/plans/{id})

Beautiful plan file viewer with:

• Markdown Rendering - Syntax-highlighted code blocks
• Version Selector - Dropdown to switch between versions
• Frontmatter Display - Collapsible YAML metadata view
• Actions - Edit, view history, download
• File Location - Shows actual file path

Plan File Editor (/plans/{id}/edit)

Edit plan files with:

• Markdown Editor - Monospace font with tab support
• Version Notes - Add changelog for new version
• Preview - Shows current version info
• Auto-save - Keyboard shortcut (Ctrl+S / Cmd+S)

Version History (/plans/{id}/history)

View complete version timeline:

• Timeline View - Visual history of all versions
• Version Cards - Each version with metadata
• Change Notes - Changelog for each update
• Content Hash - SHA256 fingerprint
• Quick View - Jump to any version

Design Features

Modern UI

• Color Scheme - Professional blue/gray palette
• Responsive Layout - Works on all screen sizes
• Card-Based Design - Clean, organized components
• Icon Integration - Font Awesome icons throughout

Interactive Elements

• Hover Effects - Smooth transitions on cards
• Alert Auto-dismiss - Notifications fade after 5 seconds
• Keyboard Shortcuts - Ctrl+S to save
• Smooth Scrolling - Native smooth scroll behavior

Common Workflows

Creating a Project

1. Go to http://localhost:8080/projects
2. Click "New Project"
3. Fill in project name, description, paths
4. Submit - project created with .gitignore updated

Creating a Plan File

1. Go to project detail page
2. Click "New Plan File"
3. Enter name, description, markdown content
4. Submit - version 1 created automatically

Editing a Plan

1. Open plan file viewer
2. Click "Edit"
3. Modify content, add version notes
4. Save - creates new version (v2, v3, etc.)

Viewing Version History

1. Open plan file viewer
2. Click "History"
3. See timeline of all versions
4. Click any version to view it

API Endpoints

The web interface also provides JSON API endpoints:

GET /api/projects

List all projects.

GET /api/projects/{id}/plans

List plan files for a project.

GET /api/plans/{id}

Get plan file content.

GET /api/plans/{id}?version=N

Get specific version of a plan file.

Customization

Custom Port

flanner web --port 5000

Network Access

flanner web --host 0.0.0.0 --port 8080

Changing Colors

Edit web/static/css/styles.css:

:root {
    --primary-color: #4f46e5; /* Change to your color */
    --secondary-color: #64748b;
}

Troubleshooting

Web server won't start

• Check if port 8080 is already in use
• Try a different port: flanner web --port 3000
• Ensure database is initialized: flanner init

Templates not loading

• Verify web/templates/ directory exists
• Check file permissions

CSS not applying

• Verify web/static/css/styles.css exists
• Check browser console for 404 errors
• Hard refresh browser (Ctrl+Shift+R)

Markdown not rendering

• Verify markdown and pygments packages installed
• Check plan file content is valid markdown

Performance

• Load Time - <100ms for dashboard
• Markdown Rendering - Real-time conversion
• API Response - <50ms average
• File Operations - Instant for typical files

File Structure

web/
├── templates/
│   ├── base.html           # Base template with nav
│   ├── dashboard.html      # Dashboard page
│   ├── projects.html       # Projects list
│   ├── project_new.html    # Create project form
│   ├── project_detail.html # Project detail page
│   ├── plan_new.html       # Create plan form
│   ├── plan_view.html      # Plan viewer
│   ├── plan_edit.html      # Plan editor
│   └── plan_history.html   # Version history
├── static/
│   ├── css/
│   │   └── styles.css      # All styles (850+ lines)
│   └── js/
│       └── app.js          # Interactive features