TheyOne PM

AI work tracker. Single HTML file, no build, no dependencies. An AI agent writes to it. A human reads it.

🚀 Why TheyOne PM?

TheyOne PM is purpose-built for the AI-assisted development workflow where AI creates work and humans review it. Unlike traditional project management tools, it's designed from the ground up for seamless AI-human collaboration with zero setup and maximum privacy.

📸 Screenshots

Task Modal: 6‑tab editor (Details, Checklist, Comments, Time Log, Links, Labels)

👥 Who Is This For?

• Individual developers using AI coding assistants (Cursor, Copilot, Claude, etc.)
• Small teams (2-5 people) experimenting with AI-assisted workflows
• Privacy-conscious teams preferring local-only data storage
• Educational settings teaching AI-assisted development
• Open source maintainers tracking AI contributions
• Anyone wanting a lightweight, powerful PM tool without accounts or servers

🎯 Core Value Proposition

Zero-friction AI-human work tracking - Eliminates the communication gap between AI agents and humans through a persistent, shared system requiring no setup, no server, and no dependencies.

🖥️ Views & Navigation

Press these keys to switch views instantly:

Key	View	Description
0	Dashboard	Overview with stats, sprint progress, quick actions, velocity, today's session, what-changed-since-last-visit
1	Board	Kanban board with drag-drop, swimlanes (group by owner), WIP limits
2	Roadmap	Gantt timeline with task dependencies
3	Calendar	Month view with drag-to-reschedule
4	Table	Sortable grid with inline editing, bulk actions, search
5	Backlog	Epics → Features → Stories hierarchy with drag-to-reorder
6	Analytics	Status bars, priority charts, burndown, CFD, velocity
Y	Sessions	AI session history with task counts, files changed, commits made
S	Sprint Planning	Drag tasks from backlog into current sprint
D / Shift+D	DoR / DoD Checklist	Definition of Ready / Definition of Done
?	Shortcuts Panel	Interactive keyboard shortcuts reference

📸 Screenshots

⚡ AI Agent Integration (Programmatic API)

AI agents can interact programmatically through the Store object:

// Create task with smart defaults (status=todo, priority=p1, owner='ai-agent')
Store.quickTask('Fix the login bug', { priority: 'p0' });

// Log structured session with summary
Store.logSession('Fixed login token refresh, added error handling');

// Create task from pre-filled template (bug/feature/chore/refactor)
Store.createFromTemplate('bug', 'Session timeout on mobile');

// Bulk update multiple tasks
Store.bulkUpdate([taskId1, taskId2], { status: 'done' });

// Auto-breakdown epic into subtasks
Store.breakdownTask(epicId, ['Subtask A', 'Subtask B', 'Subtask C']);

// Archive completed tasks older than N days
Store.cleanupCompleted(30);

🛠️ Task Management Features

Complete Task Lifecycle

• Create: Store.quickTask(), Store.createFromTemplate(), UI buttons
• Read: All views, search, filtering, sorting
• Update: Inline editing, modal forms, bulk updates, programmatic API
• Delete: With undo support (Ctrl+Z)
• Clone: Duplicate tasks with all metadata

Rich Task Metadata

Each task includes:

• Identity: PKGD-{number} format (e.g., PKGD-100)
• Hierarchy: Epic → Feature → Story → Task
• Status: todo | active | blocked | done
• Priority: p0 | p1 | p2
• Estimation: Story points, time estimates
• Ownership: Assigned owner (ai-agent or human)
• Timeline: Start date, end date, timestamps
• Content: Description, acceptance criteria, completion notes
• Organization: Labels, checklists, subtasks, comments
• Tracking: Files changed, git commits, time logs
• AI Tracking: createdAt, updatedAt, completedAt, lastActor, session
• Dependencies: Blocked-by relationships

Advanced Features

• Status badges: Color-coded on every card (todo/gray, active/blue, blocked/red, done/green)
• AI/Human indicators: Badges showing who created/last modified task
• Dependency visualization: See what blocks what on cards
• File/commit links: Click to view associated files/commits
• Checklists: Required/optional/auto tagging with visual progress
• Subtasks & time tracking: Nested task breakdown
• Comments & time log: Discussion and effort tracking
• Clone/duplicate: Copy tasks with all metadata
• Undo/redo: Ctrl+Z for destructive operations

👁️ Views in Detail

Dashboard (0)

• Today's session: Summary of what AI/human did in current session
• What changed since last visit: Diff view showing new/updated tasks
• Sprint progress: Current sprint completion & velocity
• Velocity chart: Historical trend of completed story points
• Quick actions: Create task, open task, switch views, cleanup, log session
• Stats cards: Totals, completion rates, overdue items, due today

Board (1)

• Kanban columns: todo → active → blocked → done
• Swimlanes: Group tasks by owner (ai-agent, human names)
• WIP limits: Visual warnings when columns exceed limits
• Drag & drop: Reorder within column or move between columns
• Column actions: WIP limits, column settings
• Card badges: Status, priority, labels, story points, AI/Human indicators
• Inline editing: Double-click title/owner to edit

Table (4)

• Sortable columns: Click headers to sort (ID, title, status, priority, etc.)
• Inline editing: Double-click any cell to edit
• Bulk actions: Select multiple → change status/delete/etc.
• Search: Real-time filtering as you type
• Column visibility: Show/hide columns as needed
• Export: Selected rows or all to CSV/JSON

Analytics (6)

• Status distribution: Pie chart of task statuses
• Priority breakdown: Pie chart of task priorities
• Burndown chart: Sprint progress over time
• Cumulative Flow Diagram (CFD): Workflow efficiency visualization
• Velocity chart: Historical sprint velocity trend
• Status bars: Quick overview of task distribution

Sessions (Y)

• Session list: Chronological history of work sessions
• Session details: Tasks created/completed/updated, files changed, commits made
• Actor tracking: See whether AI or human was primary in each session
• Activity drill-down: Click to see what changed in each session

⌨️ Keyboard Shortcuts (Power User Mode)

Key	Action
0-9	Switch views (0=Dashboard, 1=Board, etc.)
C / N	Create new task
I	Import JSON
S	Sprint planning
D / Shift+D	DoR / DoD checklists
Cmd/Ctrl+K	Command palette (quick search & navigation)
/	Focus search box
Ctrl+Z	Undo last delete
?	Show shortcuts panel
Esc	Close modal / palette
← / →	Navigate calendar months
Enter	Submit forms / confirm actions

🔐 Data & Privacy

Storage

• Primary: IndexedDB (efficient, handles large datasets, private)
• Fallback: localStorage (for smaller data, no size limits)
• Schema versioning: Safe migrations when updating the tool
• Export/Import: JSON (theyone-pm-export.json) and CSV formats
• Zero telemetry: No data leaves your machine unless you explicitly export

Data Persistence

• All data survives browser refreshes, tab/window closes, and system reboots
• First-time users get 14 sample tasks (PKGD-100 through PKGD-113) to explore
• Manual backups: Export JSON/CSV anytime
• Manual restore: Import previously exported data

⏱️ Performance & Scale

• Instant load: Opens immediately in any modern browser
• Efficient rendering: Virtual lists for large datasets (1000+ tasks)
• Responsive design: Adapts to tablet (1024px), mobile (768px), small mobile (480px)
• Memory conscious: Virtual scrolling for long lists
• Tested scale: Performs well with 1000+ tasks, 100+ epics/features/stories

🔧 Technical Architecture

index.html          — 2985 lines (~210KB), complete application
validate.py         — Pre-commit validator (catches structural px bugs)
README.md           — This file
docs/
  PRD.md            — Product requirements (all R1-R16 complete)
  DATA_MODEL.md     — Complete task/session/log data shapes
  PROJECT_PLAN.md   — Implementation timeline (all phases complete)
  DEV_GUIDE.md      — Development conventions and rules
  AUDIT.md          — AI tracking audit scores and recommendations

🛡️ Design Principles

• Fibonacci spacing: All spacing uses 2,3,5,8,13,21,34,55,89px scale for visual harmony
• CSS variables: --g1 through --g8 (gaps), --r-xs through --r-xl (border-radius)
• Dark mode first: Toggle with theme button in topbar (respects OS preference)
• Responsive breakpoints: 1024px (tablet), 768px (mobile), 480px (small mobile)
• Accessibility foundation: Good color contrast, keyboard navigable, semantic HTML
• Zero dependencies: Google Fonts is the only external resource

🚦 Before Committing Code Changes

Run the validation script to catch common mistakes:

python3 validate.py    # checks for structural px values, syntax errors

🛡️ Preventing Unintended AI Modifications

Since the tool is meant to be a stable shared interface, you may want to protect the index.html file from being overwritten by AI agents. Recommended safeguards:

• Branch protection: Enable required pull‑request reviews on the default branch (e.g., main). AI agents can then only propose changes via PRs that a human must approve.
• CODEOWNERS: Add a CODEOWNERS file with * @human-reviewer (or a specific team) so any change to index.html triggers a required review.
• Read‑only fork: Keep a canonical read‑only repository that AI agents clone; they can propose changes via fork‑and‑PR workflow.
• File permissions: On systems that support it, set the file as immutable (chattr +i index.html on Linux) when you want to lock the version.

These steps let AI agents still use the tool programmatically while ensuring the core interface remains stable unless a human explicitly approves changes.

📥 Getting Started

Option 1: Direct Use (Recommended)

# Clone the repository
git clone https://github.com/theyonecodes/theyonepm.git

# Open in your default browser (no server needed!)
open theyonepm/index.html  # macOS
xdg-open theyonepm/index.html  # Linux
start theyonepm/index.html  # Windows

Option 2: Bookmarklet

Bookmark this URL for instant access:

data:text/html;base64,PGJvZHk+CjxzY3JpcHQ+ZG9jdW1lbnQud3JpdGUoIjxocmVmPmh0dHBzOi8vaW1nLXNoaWVsZHMuY29tL2JpdGJ1Y2tlbWFuL2ZpbGVzL3Jhdy9tYWluL2luZGV4Lmh0bWw/PC9zY3JpcHQ+P3JlcGxhY2UoIjwvYm9keT4iLCI8c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYWdzLmdpdGh1YnVzZXJjb250ZW50LmNvbS90aGV5b25lY29kZXMveW9uZXVwbS9tYWluL2luZGV4Lmh0bWwiKz48L3NjcmlwdD4iKSk7PC9zY3JpcHQ+

Option 3: Embed in Your Project

Copy index.html directly into your repository's root or docs/ folder.

📖 Documentation

• PRD.md - Product requirements (all R1-R16 implemented)
• DATA_MODEL.md - Complete data shapes for tasks, sessions, logs
• DEV_GUIDE.md - Development conventions and rules
• AUDIT.md - AI tracking audit scores and recommendations
• PROJECT_PLAN.md - Implementation timeline (all phases complete)

🐛 Bug Reports & Feedback

Please open an issue on GitHub with:

• Steps to reproduce
• Expected vs actual behavior
• Browser and OS information
• Screenshots if applicable

🌐 Online Demo (Free)

GitHub Pages is free for public repositories. If your repo is public, enable Pages:

1. Go to Settings → Pages in the repo.
2. Set Source: main branch / / (root).
3. Click Save. The site will be available at:
   https://theyonecodes.github.io/theyonepm/

If your repository is private (as it is by default), you can still host the site for free using other static‑hosting services that integrate with GitHub:

• Netlify – free tier, connects to your repo and deploys on push.
  Install the Netlify CLI (npm i -g netlify-cli) then run netlify init and netlify deploy --prod.
• Vercel – free tier, similar workflow (vercel CLI).
• Cloudflare Pages – free tier (wrangler pages publish .).

These services serve the single index.html exactly as it runs locally, so the full TheyOne PM experience works online without a server or build step.

Once you have a live URL, you can update the README link above or bookmark it for direct access.

📜 License

MIT License - Free for personal, commercial, and educational use.

---

TheyOne PM: Where AI writes the work and humans read it. No server. No build. No dependencies. Just productivity. 🚀