Skip to content

Conversation

@bborn
Copy link
Owner

@bborn bborn commented Jan 14, 2026

Summary

  • Adds complete web-based UI for taskyou with per-user isolated Fly Sprite VMs
  • Each user gets their own VM with SQLite DB - host never sees user task data
  • React + TypeScript + TailwindCSS + Shadcn/ui frontend with full TUI feature parity

Architecture

┌─────────────────┐     ┌────────────────────────────┐
│   Browser       │────▶│     taskweb (Host)         │
└─────────────────┘     │  - OAuth (Google/GitHub)   │
                        │  - Session management      │
                        │  - Sprite orchestration    │
                        └────────────┬───────────────┘
                                     │ Sprites API
              ┌──────────────────────┼──────────────┐
              ▼                      ▼              ▼
       ┌────────────┐        ┌────────────┐  ┌────────────┐
       │  Sprite A  │        │  Sprite B  │  │  Sprite C  │
       │  webapi    │        │  webapi    │  │  webapi    │
       │  SQLite    │        │  SQLite    │  │  SQLite    │
       └────────────┘        └────────────┘  └────────────┘

Backend Components

  • cmd/taskweb/: Host web service (OAuth, sprites orchestration)
  • cmd/taskweb-dev/: Local development server (bypasses OAuth)
  • internal/hostdb/: Host database (users, OAuth accounts, sprites, sessions)
  • internal/auth/: OAuth providers (Google, GitHub) and session management
  • internal/sprite/: Fly Sprites SDK integration
  • internal/webserver/: Host HTTP server
  • internal/webapi/: HTTP API running inside each sprite

Frontend Features

  • 4-column Kanban board (Backlog, In Progress, Blocked, Done)
  • Task cards with status badges, project tags, action buttons
  • Task detail panel with live execution logs
  • Settings page (theme, defaults, project management)
  • OAuth login page (Google, GitHub)

Test plan

  • Run cd web && npm install && npm run dev - frontend starts on :5173
  • Run make dev-web - API server starts on :8081
  • Open http://localhost:5173 - dashboard loads with tasks
  • Click task card - detail panel opens
  • Click Settings gear - settings page loads
  • Verify projects list displays correctly

🤖 Generated with Claude Code

bborn and others added 4 commits January 14, 2026 06:09
This PR adds a complete web-based UI for taskyou with the following architecture:

## Architecture
- **Host (taskweb)**: Handles OAuth authentication, session management, and Fly Sprites orchestration
- **Sprite (webapi)**: HTTP API that runs inside each user's Fly Sprite VM
- **Frontend (web)**: React + TypeScript + TailwindCSS + Shadcn/ui

Each user gets their own isolated Fly Sprite VM with SQLite DB - the host never sees user task data.

## Backend Components
- `cmd/taskweb/main.go`: Host web service entry point
- `cmd/taskweb-dev/main.go`: Local development server (bypasses OAuth)
- `internal/hostdb/`: Host database for users, OAuth accounts, sprites, sessions
- `internal/auth/`: OAuth providers (Google, GitHub) and session management
- `internal/sprite/`: Fly Sprites SDK integration for VM management
- `internal/webserver/`: Host HTTP server with OAuth endpoints
- `internal/webapi/`: HTTP/WebSocket API that runs inside sprites

## Frontend Components
- Kanban board with 4 columns (Backlog, In Progress, Blocked, Done)
- Task cards with status badges, project tags, action buttons
- Task detail panel with live execution logs
- Settings page with theme, defaults, and project management
- New task dialog
- OAuth login page

## Development
Run locally with:
```bash
cd web && npm install && npm run dev  # Frontend on :5173
make dev-web                           # API server on :8081
```

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove unused getSessionFromContext function
- Remove unused parseJSON function
- Remove unused getProviderFromPath function
- Remove unnecessary f.Stat() call

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add framer-motion for smooth animations throughout
- Create Command Palette (Cmd+K) for quick task search and navigation
- Enhance TaskCard with status animations, glow effects, and better visual hierarchy
- Redesign TaskBoard with staggered animations and improved layout
- Build comprehensive TaskDetail panel with:
  - Inline task editing
  - Retry with feedback dialog
  - Expandable execution logs with syntax highlighting
  - Status badges and metadata display
- Improve Login page with split layout and feature highlights
- Redesign Settings page with card-based sections and animations
- Add global keyboard shortcuts (N: new task, R: refresh, S: settings)
- Implement status-based color system with CSS variables
- Add glassmorphism, glow effects, and gradient accents
- Create smooth scrollbars and better responsive design

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- CORS middleware now uses actual request Origin header for dev mode
- Add Hijack() method to responseWriter for WebSocket support
- Add fallback status icon for unknown task statuses in CommandPalette

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@openhands-ai
Copy link

openhands-ai bot commented Jan 20, 2026

Looks like there are a few issues preventing this PR from being merged!

  • GitHub Actions are failing:
    • CI

If you'd like me to help, just leave a comment, like

@OpenHands please fix the failing actions on PR #160 at branch `task/348-build-a-web-based-ui-for-taskyou`

Feel free to include any additional details that might help me get this PR into a better state.

You can manage your notification settings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants