Tracks implementation status for TODO.md Started: 2026-03-07
- PENDING: Not started
- IN PROGRESS: Currently being worked on
- DONE: Completed
- SKIPPED: Decided not to implement
| # | Task | Status | Date | Notes |
|---|---|---|---|---|
| 1.1 | Root Error Boundary | DONE | 2026-03-07 | ErrorBoundary.tsx created, wrapped in main.tsx |
| 1.2 | Toast Notification System | DONE | 2026-03-07 | Toast.tsx + useToast hook created, ToastProvider in main.tsx |
| 1.3 | Theme Transition Suppression | DONE | 2026-03-07 | .no-transitions class in CSS, applied in SettingsView theme+accent |
| 1.4 | Draft Preservation Per Thread | DONE | 2026-03-07 | draftStore.ts created, integrated in ThreadView |
| # | Task | Status | Date | Notes |
|---|---|---|---|---|
| 2.1 | UI Component Library | DONE | 2026-03-07 | 12 components + barrel export in ui/ |
| 2.1a | - Button | DONE | 2026-03-07 | CVA: 5 variants, 4 sizes, loading state |
| 2.1b | - Input | DONE | 2026-03-07 | CVA: 3 sizes, error state, forwardRef |
| 2.1c | - Badge | DONE | 2026-03-07 | CVA: 5 variants |
| 2.1d | - Dialog | DONE | 2026-03-07 | Tailwind classes, subcomponents |
| 2.1e | - Tooltip | DONE | 2026-03-07 | 4 sides, delay, Tailwind classes |
| 2.1f | - Spinner | DONE | 2026-03-07 | 3 sizes, animate-spin |
| 2.1g | - Separator | DONE | 2026-03-07 | horizontal/vertical, Tailwind |
| 2.1h | - Skeleton | DONE | 2026-03-07 | animate-shimmer, Tailwind |
| 2.1i | - ScrollArea | DONE | 2026-03-07 | Thin scrollbar wrapper, Tailwind |
| 2.1j | - Kbd | DONE | 2026-03-07 | Keyboard shortcut key cap, Tailwind |
| 2.2 | Zustand State Management | DONE | 2026-03-07 | appStore.ts + settingsStore.ts created with persist middleware |
| 2.3 | Skeleton Loading States | DONE | 2026-03-07 | Sidebar shows skeleton placeholders while projects load |
| 2.4 | Accessibility Improvements | DONE | 2026-03-07 | ARIA roles on theme/accent selectors, aria-labels on icon buttons, focus-visible rings, aria-live on streaming, role="status" on spinners |
| 2.5 | Popover Component | DONE | 2026-03-07 | Tailwind classes, auto-positioning, viewport clamping |
| 2.6 | Scrollbar Theme Awareness | DONE | 2026-03-07 | Added midnight + nord scrollbar styles, focus-visible rings |
| # | Task | Status | Date | Notes |
|---|---|---|---|---|
| 3.1 | Tailwind CSS Migration | DONE | 2026-03-07 | All 24 components migrated. Style objects removed, ~2000 lines eliminated |
| 3.2 | Hash Router | DONE | 2026-03-07 | @tanstack/react-router with hash history, URL-based thread selection (/$threadId), settings stays as overlay |
| 3.3 | Sheet Component | DONE | 2026-03-07 | 4-side slide panels, Tailwind classes |
| 3.4 | Responsive Design | DONE | 2026-03-07 | useMediaQuery hook, BREAKPOINTS, mobile sidebar via Sheet |
| 3.5 | Shiki Syntax Highlighting | DONE | 2026-03-07 | Lazy-loaded Shiki, LRU cache (500), copy button on code blocks |
| 3.6 | Typography System | DONE | 2026-03-07 | CSS vars for font scale (xs-2xl) and line heights added to :root |
| # | Task | Status | Date | Notes |
|---|---|---|---|---|
| 4.1 | Rich Text Editor (Lexical) | DONE | 2026-03-07 | ComposerEditor.tsx with plain text mode, 5 plugins (keyboard, paste, history, tracking, disabled) |
| 4.2 | Integrated Terminal Drawer | DONE | 2026-03-07 | xterm.js + node-pty via IPC, resizable drawer, Ctrl+` toggle, lazy-loaded |
| 4.3 | Git Diff Panel | DONE | 2026-03-07 | Unified diff view, file tree, resizable side panel, uses existing git APIs |
| 4.4 | Command Palette | DONE | 2026-03-07 | Ctrl+K, fuzzy search, section grouping, keyboard nav, integrated in App.tsx |
| Date | Change |
|---|---|
| 2026-03-07 | Created TODO.md and PROGRESS.md |
| 2026-03-07 | Phase 1 complete: ErrorBoundary, Toast, theme suppression, draft preservation |
| 2026-03-07 | Phase 2 complete: All UI components, Zustand stores, skeleton loading, accessibility, Popover, scrollbar theming |
| 2026-03-07 | Phase 3 partial: Sheet, responsive sidebar, Shiki highlighting, typography system |
| 2026-03-07 | Phase 4 partial: Command palette (Ctrl+K) |
| 2026-03-07 | Phase 4 complete: ComposerEditor (Lexical), TerminalDrawer (xterm+pty), DiffPanel (unified diff) created |
| 2026-03-08 | Integrated TerminalDrawer + DiffPanel into App.tsx with lazy loading, Ctrl+` shortcut, command palette items |
| 2026-03-07 | Tailwind CSS 4 setup: @tailwindcss/vite, @theme block, cn() utility, CVA |
| 2026-03-07 | Migrated 20 components to Tailwind: all UI primitives, CommandPalette, EchoesLogo, LoginPage, MarkdownContent, ContextMenu, TitleBar |
| 2026-03-07 | Completed Tailwind migration: App.tsx, SettingsView, Sidebar, ThreadView. All style objects removed (~2000 lines). Only dynamic/computed inline styles remain |
| 2026-03-07 | Added @tanstack/react-router with hash history. Thread selection via URL (/$threadId). Settings remains as overlay. router.tsx created, App.tsx refactored to use useMatch/useNavigate |
| File | Purpose |
|---|---|
src/renderer/src/components/ui/ErrorBoundary.tsx |
Root error boundary with recovery UI |
src/renderer/src/components/ui/Toast.tsx |
Toast system with ToastProvider + useToast |
src/renderer/src/components/ui/Button.tsx |
CVA: 5 variants, 4 sizes, loading state |
src/renderer/src/components/ui/Input.tsx |
CVA: 3 sizes, error state, forwardRef |
src/renderer/src/components/ui/Badge.tsx |
CVA: 5 variants |
src/renderer/src/components/ui/Dialog.tsx |
Modal with subcomponents |
src/renderer/src/components/ui/Tooltip.tsx |
4-side positioning with delay |
src/renderer/src/components/ui/Popover.tsx |
Auto-positioning dropdown |
src/renderer/src/components/ui/Spinner.tsx |
3 sizes |
src/renderer/src/components/ui/Skeleton.tsx |
Shimmer loading placeholder |
src/renderer/src/components/ui/Separator.tsx |
Horizontal/vertical divider |
src/renderer/src/components/ui/ScrollArea.tsx |
Thin scrollbar wrapper |
src/renderer/src/components/ui/Kbd.tsx |
Keyboard shortcut key cap |
src/renderer/src/components/ui/Sheet.tsx |
Slide-in panels (4 sides) |
src/renderer/src/components/ui/index.ts |
Barrel export |
src/renderer/src/components/CommandPalette.tsx |
Ctrl+K command palette |
src/renderer/src/stores/draftStore.ts |
Per-thread draft persistence |
src/renderer/src/stores/appStore.ts |
Zustand app state (activeThread, settings, sidebar) |
src/renderer/src/stores/settingsStore.ts |
Zustand persisted settings (theme, accent, model, etc.) |
src/renderer/src/hooks/useMediaQuery.ts |
Responsive breakpoint hook |
src/renderer/src/lib/cn.ts |
Tailwind class merge utility (clsx + tailwind-merge) |
src/renderer/src/router.tsx |
TanStack Router with hash history, route tree (index + $threadId) |
src/renderer/src/components/ComposerEditor.tsx |
Lexical plain text editor with 5 plugins |
src/renderer/src/components/TerminalDrawer.tsx |
xterm.js terminal with PTY IPC bridge |
src/renderer/src/components/DiffPanel.tsx |
Unified diff viewer with file tree |
| File | Changes |
|---|---|
vite.config.ts |
Added @tailwindcss/vite plugin |
src/renderer/src/main.tsx |
Wrapped in ErrorBoundary + ToastProvider, RouterProvider with hash history |
src/renderer/src/App.tsx |
CommandPalette, Sheet mobile sidebar, projectsLoading, useMediaQuery, router integration, TerminalDrawer + DiffPanel integration |
src/renderer/src/styles/global.css |
@import "tailwindcss", @theme block, @layer base, animations, theme vars |
src/renderer/src/components/EchoesLogo.tsx |
className="shrink-0" instead of inline style |
src/renderer/src/components/LoginPage.tsx |
Full Tailwind migration |
src/renderer/src/components/TitleBar.tsx |
Full Tailwind migration, cn() for conditional classes |
src/renderer/src/components/ContextMenu.tsx |
Full Tailwind migration |
src/renderer/src/components/MarkdownContent.tsx |
Full Tailwind migration, Shiki highlighting preserved |
src/renderer/src/components/SettingsView.tsx |
Theme/accent transition suppression, ARIA roles |
src/renderer/src/components/ThreadView.tsx |
Draft load/save, aria-live on streaming |
src/renderer/src/components/Sidebar.tsx |
Skeleton loading, projectsLoading prop, aria-labels |
src/main/index.ts |
node-pty terminal IPC handlers (create/write/resize/destroy) |
src/preload/index.ts |
Terminal API bridge (create/write/resize/destroy/onData/onExit) |
src/renderer/src/types/electron.d.ts |
TerminalAPI interface |
package.json |
Added zustand, shiki, tailwindcss, @tailwindcss/vite, class-variance-authority, tailwind-merge, clsx, @tanstack/react-router, lexical, @xterm/xterm, @xterm/addon-fit, node-pty |
| Tailwind Utility | CSS Variable | Example |
|---|---|---|
bg-app |
var(--bg-base) |
Base app background |
bg-surface |
var(--bg-surface) |
Surface layer |
bg-elevated |
var(--bg-elevated) |
Elevated panels |
bg-hover |
var(--bg-hover) |
Hover state |
bg-active |
var(--bg-active) |
Active/pressed state |
text-fg |
var(--text-primary) |
Primary text |
text-fg-2 |
var(--text-secondary) |
Secondary text |
text-fg-3 |
var(--text-muted) |
Muted text |
text-fg-accent |
var(--text-accent) |
Accent text |
bg-accent / text-accent |
var(--accent) |
Accent color |
border-edge |
var(--border) |
Default border |
border-edge-hover |
var(--border-hover) |
Hover border |
border-edge-accent |
var(--border-accent) |
Accent border |
text-error |
var(--status-error) |
Error color |
text-warning |
var(--status-warning) |
Warning color |
| Task | Reason |
|---|---|
| ComposerEditor integration | Replace ThreadView textarea with Lexical ComposerEditor (component created, integration pending) |