Skip to content

STATUS.md

Latest commit

 

History

History
371 lines (277 loc) · 10.3 KB

STATUS.md

File metadata and controls

371 lines (277 loc) · 10.3 KB
Raw

Cipher Draw — Current Status

Last Updated: June 24, 2026 Phase: Phase 1 (MVP Editor) - 95% Complete Next Milestone: Public Beta Launch

🎯 Quick Summary

What Works: ✅ Monaco Editor with 4 modes (Markdown, Mermaid, SVG, Mixed) ✅ Live preview with 300ms debounce ✅ Export to SVG, PNG, PDF, MD ✅ URL-based sharing via compressed hash ✅ Read-only view page ⭐ ✅ Fork functionality ⭐ ✅ Keyboard shortcuts (Ctrl+S, Ctrl+Enter) ⭐ NEW ✅ Share link feedback (Copied! button state) ⭐ NEW ✅ Dark/light theme system ✅ Resizable split panes ✅ Sample templates ✅ State persistence (localStorage)

What's Missing: ⚠️ Mobile responsive testing ✅ CI/CD pipeline (GitHub Actions) ⚠️ System theme detection ⚠️ Toast notifications (unsaved warning, share/export feedback)

📊 Phase Progress

Phase 1: MVP Editor           ██████████████████░ 90%  🔄 Active
Phase 2: Accounts & Spaces    ░░░░░░░░░░░░░░░░░░  0%  ⏸️ Not Started
Phase 3: AI Layer             ░░░░░░░░░░░░░░░░░░  0%  ⏸️ Not Started
Phase 4: Sharing & Gallery    ░░░░░░░░░░░░░░░░░░  0%  ⏸️ Not Started
Phase 5: Collaboration        ░░░░░░░░░░░░░░░░░░  0%  ⏸️ Not Started

🚨 Phase 1 Completion Tasks

Critical (Blocking Public Beta)

1. Read-Only View Page ✅ COMPLETE

Priority: P0 | Time: 2-3 hours | Status: ✅ Complete

Create /view/[token] route for read-only sharing:

  • Decode state from URL hash
  • Render in read-only mode (preview only, no editor)
  • Show title, mode badge, theme selector
  • Add "Fork this" button → copies content to editor
  • Add "Open in Editor" link
  • Metadata footer: "Created with Cipher Draw"
  • Loading state with spinner
  • Error handling for invalid/corrupted links
  • Export functionality (SVG, PNG, PDF)

Files created:

  • apps/web/app/view/[token]/page.tsx ✅

Implementation notes:

  • Uses readStateFromHash() to decode shared state
  • Shows loading spinner while decoding
  • Graceful error handling with helpful message
  • "Fork to Editor" button redirects to home with hash
  • Full export support in view mode
  • Theme toggle and preview background options

2. Fork Functionality ✅ COMPLETE (included in View Page)

Priority: P0 | Time: 1 hour | Status: ✅ Complete

  • "Fork" button on view page
  • On click → redirect to home with content in URL hash
  • Editor auto-loads forked content

Implementation: Integrated into View Page (task #1). Fork button uses router.push(\/#${window.location.hash.slice(1)}`)` to redirect to home page with content in hash.

3. Keyboard Shortcuts ✅ COMPLETE

Priority: P0 | Time: 1-2 hours | Status: ✅ Complete

  • Ctrl+S / Cmd+S → flashes "Saved" in status bar for 2s
  • Ctrl+Enter / Cmd+Enter → force re-renders preview
  • Prevent default browser behavior

Files modified:

  • apps/web/app/page.tsx — keyboard shortcut effect, savedState, renderTick
  • apps/web/components/preview/PreviewPane.tsx — renderTick prop in deps

4. Mobile Responsive

Priority: P0 | Time: 3-4 hours | Status: ⚠️ Needs Testing

  • Test on iOS Safari, Android Chrome
  • Implement tab-based view if split pane breaks
  • Ensure 44px min touch targets
  • Test export functions on mobile
  • Test share functionality on mobile

5. CI/CD Pipeline ✅ COMPLETE

Priority: P0 | Time: 2-3 hours | Status: ✅ Complete

  • Create .github/workflows/ci.yml
  • Lint check (ESLint)
  • Type check (TypeScript tsc --noEmit)
  • Test run (Vitest)
  • Build check (Next.js build)
  • Runs on every PR and push to master

Files created:

  • .github/workflows/ci.yml

6. Vercel Deployment

Priority: P0 | Time: 1 hour | Status: ❌ Not Started

  • Create vercel.json configuration
  • Set up environment variables in Vercel
  • Set up preview deployments for PRs
  • Set up production deployment from main
  • Test production build

Important (Should Have)

7. System Theme Detection

Priority: P1 | Time: 1 hour | Status: ❌ Not Started

  • Detect system dark/light preference on initial load
  • Respect user's manual selection
  • Listen for system theme changes

8. Loading States

Priority: P1 | Time: 1 hour | Status: ❌ Not Started

  • Show spinner when rendering takes >500ms
  • Show progress indicator during export

9. Better Error Messages

Priority: P1 | Time: 2 hours | Status: ❌ Not Started

  • Map common Mermaid errors to helpful messages
  • Link to Mermaid documentation for syntax errors
  • Show line number of error if available

10. Unsaved Changes Warning

Priority: P1 | Time: 30 min | Status: ❌ Not Started

  • Warn before closing tab with unsaved changes
  • Use beforeunload event
  • Don't show if content matches localStorage

Polish (Nice to Have)

11. UI Improvements

Priority: P2 | Time: 2-3 hours | Status: ❌ Not Started

  • Add tooltips to all toolbar buttons
  • Add empty state message when editor is blank
  • Add "Help" button with keyboard shortcuts
  • Improve button hover states
  • Add subtle animations

12. Accessibility Audit

Priority: P2 | Time: 2-3 hours | Status: ❌ Not Started

  • Keyboard navigation for all features
  • Screen reader support (ARIA labels)
  • Focus indicators visible
  • Color contrast meets WCAG AA
  • Run Lighthouse accessibility audit (target: 90+)

13. Test Coverage

Priority: P1 | Time: 4-5 hours | Status: ⚠️ Minimal

Current coverage: 2 test files only

  • ✅ codec.test.ts - Share compression
  • ✅ renderMixed.test.ts - Mixed mode rendering

Tests needed:

  • Unit tests for all renderers
  • Unit tests for export functions
  • Integration tests for render pipeline
  • E2E tests (Playwright) for critical flows

Target: 70%+ overall coverage

14. Performance Audit

Priority: P2 | Time: 2-3 hours | Status: ⚠️ Not Measured

  • Run Lighthouse audit (target: 90+ for all metrics)
  • Analyze bundle size (@next/bundle-analyzer)
  • Test with large documents (1000+ lines)
  • Optimize large dependencies if needed

Targets:

  • Performance: 90+
  • First Contentful Paint: <1.5s
  • Time to Interactive: <3s
  • Bundle size: <300KB first load

✅ Estimated Time to Public Beta

Critical path: 8-12 hours Total with polish: 16-24 hours Timeline: 1-2 days of focused work

🏗️ Technical Stack

Frontend:

  • Next.js 14 (App Router)
  • React 18
  • TypeScript
  • Monaco Editor
  • Mermaid 11
  • Zustand (state management)
  • Tailwind CSS + shadcn/ui

Dependencies (17 production):

  • @monaco-editor/react (4.7.0)
  • mermaid (11.12.0)
  • lz-string (1.5.0)
  • dompurify (3.2.6)
  • html-to-image (1.11.11)
  • jspdf (2.5.2)
  • zustand (5.0.8)
  • remark + rehype ecosystem

Dev Dependencies (11):

  • typescript (5.8.3)
  • vitest (2.1.9)
  • eslint + prettier

🗂️ File Structure

apps/web/
├── app/
│   ├── page.tsx                    # Main editor ✅
│   ├── layout.tsx                  # Root layout ✅
│   ├── globals.css                 # Styles ✅
│   └── view/[token]/page.tsx       # View page ✅
│
├── components/
│   ├── editor/
│   │   └── MonacoEditor.tsx        # Editor ✅
│   ├── preview/
│   │   ├── PreviewPane.tsx         # Preview ✅
│   │   └── renderers/
│   │       ├── renderMarkdown.ts   # ✅
│   │       ├── renderMermaid.ts    # ✅
│   │       ├── renderMixed.ts      # ✅
│   │       └── renderSvg.ts        # ✅
│   └── ui/
│       ├── button.tsx              # shadcn ✅
│       └── select.tsx              # shadcn ✅
│
├── lib/
│   ├── export/                     # SVG/PNG/PDF ✅
│   ├── share/                      # Hash codec ✅
│   ├── sanitize/                   # DOMPurify ✅
│   ├── templates.ts                # Samples ✅
│   └── utils.ts                    # Helpers ✅
│
├── store/
│   └── useDocStore.ts              # Zustand ✅
│
└── tests/
    ├── codec.test.ts               # ✅
    └── renderMixed.test.ts         # ✅

🐛 Known Issues

  1. URL length limit - Hash-based sharing fails for very large documents (>8KB)

    • Solution: Phase 2 server-side save with short tokens

  2. No mobile optimization - Layout may break on small screens

    • Solution: Tab-based view (TO DO)

  3. Mermaid errors cryptic - Hard to debug syntax errors

    • Solution: Better error parsing (TO DO)

  4. No unsaved changes warning - Easy to lose work

    • Solution: beforeunload listener (TO DO)

  5. Theme doesn't match system - Always starts in dark mode

    • Solution: System preference detection (TO DO)

  6. Debug toolbar — removed ✅

🔐 Security

Current: ✅ DOMPurify sanitization for all rendered HTML/SVG ✅ XSS protection via React's JSX escaping ✅ No user authentication yet (Phase 2) ✅ No sensitive data stored server-side

Phase 2 Requirements:

  • CSRF protection
  • Rate limiting for API endpoints
  • Input validation and sanitization on backend
  • Secure password hashing (bcrypt)
  • JWT token security

📈 Performance Metrics

Lighthouse (Local Dev):

  • Performance: ~95 (needs production test)
  • Accessibility: ~90 (keyboard nav needs work)
  • Best Practices: ~100 ✅
  • SEO: ~90 ✅

Bundle Size:

  • First Load JS: ~280KB (Monaco is large)
  • Route (page.tsx): ~45KB ✅

🔗 Related Documentation

Status document maintained by Cipher Text Labs Updated after major milestones