MyStoryFlow: Implementation Gap Analysis

Document Version: 1.0 Last Updated: 2025-01-29 Purpose: Track gaps between v1.1 architecture vision and current implementation

Overview

This document identifies the specific gaps between the v1.1 architecture roadmap (target state) and the current codebase implementation. Use this as a checklist when implementing changes.

1. Database Schema Gaps

Validated Current State (2025-01-29)

Stories Table Migration

-- Add source_recording_ids array
ALTER TABLE stories ADD COLUMN IF NOT EXISTS source_recording_ids UUID[] DEFAULT '{}';
 
-- Migrate existing singular fields to array
UPDATE stories
SET source_recording_ids = ARRAY[voice_recording_id]
WHERE voice_recording_id IS NOT NULL
  AND (source_recording_ids IS NULL OR source_recording_ids = '{}');
 
-- Create index
CREATE INDEX IF NOT EXISTS idx_stories_source_recording_ids
  ON stories USING GIN(source_recording_ids);

Books Table Migration

-- Add section_breaks (story_ids already exists!)
ALTER TABLE books ADD COLUMN IF NOT EXISTS section_breaks JSONB DEFAULT '{}';

2. Missing UI Components

CreateStoryModal

• Unified entry point for all content creation
• 4 options: Voice (recommended), AI Conversation, Write, Import
• Uses Radix Dialog pattern

BookProgress

• Shows current book progress on dashboard
• Story count, target, progress bar
• Links to active book

3. Navigation Gaps

Files: apps/web-app/lib/navigation-config.ts and apps/web-app/app/components/navigation/Sidebar.tsx

Current State (Problem)

• 7 sections with 20+ navigation items
• No prominent “Create Story” button
• “Create & Capture” section exposes 4 separate items
• “Publishing” section visible to all users

Target State

[Create Story Button]  ← Always visible at top

Dashboard
Stories
Books
Story Projects         ← Renamed from "Book Projects"
Media
Family
---
Settings
Help

Specific Changes Needed

4. Breadcrumbs Not Enabled

Component exists: apps/web-app/app/components/navigation/Breadcrumbs.tsx

Not rendered in: apps/web-app/app/components/AppHeader.tsx

Action: Import and render Breadcrumbs in AppHeader:

import Breadcrumbs from '@/components/navigation/Breadcrumbs'
 
// In AppHeader render:
<Breadcrumbs />

5. Browser Dialogs to Replace

Pattern to remove: confirm() and alert() calls

Replace with: Radix UI Dialog from @/components/ui/dialog

Files Requiring Updates

Replacement Pattern

Before (Bad):

if (confirm('Are you sure?')) {
  handleDelete()
}

After (Good):

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
 
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
 
// Dialog
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

6. Dashboard Simplification

File: apps/web-app/app/(dashboard)/dashboard/page.tsx

Current State (6-7 sections)

• QuickActionCenter
• StoryLibrary
• CampaignOverview
• BookCreation
• AIConversationHub
• FamilyActivity
• AnalyticsInsights

Target State

• Single primary CTA (“Create a New Story”)
• BookProgress widget
• Recent Stories (simplified list)
• Family Activity (compact)

7. book_chapters Usage to Eliminate

The Story = Chapter model means book_chapters table should not be used. Stories are directly referenced via books.story_ids[].

Query Pattern Change

Before:

const { data: chapters } = await supabase
  .from('book_chapters')
  .select('*, story:stories(*)')
  .eq('book_id', bookId)
  .order('chapter_number')

After:

const { data: book } = await supabase
  .from('books')
  .select('story_ids')
  .eq('id', bookId)
  .single()
 
const { data: stories } = await supabase
  .from('stories')
  .select('*')
  .in('id', book.story_ids || [])
 
// Reorder to match story_ids order
const orderedStories = book.story_ids
  .map(id => stories.find(s => s.id === id))
  .filter(Boolean)

Implementation Priority

Phase 1: Database Foundation

• books.story_ids UUID[] - Already exists
• stories.source_conversation_ids UUID[] - Already exists
• Add stories.source_recording_ids UUID[]
• Add books.section_breaks JSONB
• Rename book_chapters to _deprecated_book_chapters
• Rename conversations to _deprecated_conversations

Phase 2: Core Components

• Create CreateStoryModal component
• Create BookProgress widget
• Enable Breadcrumbs in AppHeader
• Update book/chapter queries to use Story = Chapter model

Phase 3: Navigation & UX

• Add “Create Story” button to top of Sidebar
• Rename “Book Projects” to “Story Projects”
• Simplify navigation to ~7 items
• Replace browser confirm()/alert() with Radix dialogs

Phase 4: Dashboard

• Simplify to single primary CTA
• Add BookProgress widget to dashboard
• Reduce section count to 3-4 max

Tracking Progress

Related Documents

• v1.1 Overview
• Quick Reference
• Database Schema v1.1
• v1.1 UX Roadmap