/nself-chat/
├── .backend/              # nself CLI backend (GITIGNORED)
│   ├── migrations/        # Database migrations
│   ├── docker-compose.yml # Generated by nself build
│   └── .env               # Backend environment vars
│
├── .ai/                   # AI assistant configuration (gitignored)
│   └── context.md         # Project context and instructions
│
├── .github/               # GitHub configuration
│   └── workflows/         # CI/CD workflows
│
├── deploy/                # Deployment configurations
│
├── docker/                # Docker configurations
│
├── docs/                  # Documentation (GitHub Wiki)
│   ├── SPORT.md           # Single Point of Reference/Truth
│   ├── Project-Structure.md  # This file
│   ├── Environment-Variables.md
│   ├── Database-Schema.md
│   ├── Types.md
│   ├── Features-Complete.md
│   ├── Roadmap.md
│   └── ...
│
├── e2e/                   # End-to-end tests (Playwright)
│
├── platforms/             # Platform-specific builds
│   ├── capacitor/         # Capacitor (iOS/Android)
│   ├── electron/          # Electron desktop
│   ├── react-native/      # React Native mobile
│   └── tauri/             # Tauri desktop (Rust)
│
├── public/                # Static assets
│   ├── fonts/             # Web fonts
│   ├── icons/             # App icons
│   └── ...
│
├── scripts/               # Build and utility scripts
│
├── src/                   # Application source code
│
├── .env.example           # Environment variable template
├── .env.local             # Local environment (GITIGNORED)
├── docker-compose.yml     # Development compose
├── docker-compose.prod.yml # Production compose
├── Dockerfile             # Production Dockerfile
├── Dockerfile.dev         # Development Dockerfile
├── jest.config.js         # Jest configuration
├── jest.setup.js          # Jest setup
├── Makefile               # Make commands
├── next.config.js         # Next.js configuration
├── package.json           # Package manifest
├── playwright.config.ts   # Playwright configuration
├── pnpm-lock.yaml         # pnpm lockfile
├── pnpm-workspace.yaml    # pnpm workspace config
├── postcss.config.js      # PostCSS configuration
├── tailwind.config.ts     # Tailwind configuration
├── tsconfig.json          # TypeScript configuration
└── README.md              # Project readme

src/
├── __tests__/             # Test utilities and integration tests
│   ├── integration/       # Integration test suites
│   ├── mocks/             # Test mocks
│   └── utils/             # Test utilities
│
├── app/                   # Next.js App Router pages
├── bots/                  # Built-in bot implementations
├── components/            # React components
├── config/                # Configuration files
├── contexts/              # React contexts
├── graphql/               # GraphQL operations
├── hooks/                 # Custom React hooks
├── lib/                   # Utility libraries
├── locales/               # Internationalization
├── providers/             # React providers
├── services/              # Service implementations
├── shared/                # Shared utilities
├── stores/                # Zustand stores
├── styles/                # Global styles
├── templates/             # UI templates
├── types/                 # TypeScript types
└── utils/                 # Utility functions

src/app/
├── (app)/                 # Main app layout group
├── (auth)/                # Authentication layout group
├── (setup)/               # Setup wizard layout group
│
├── activity/              # Activity feeds
│   ├── files/             # File activity
│   ├── mentions/          # Mention activity
│   └── threads/           # Thread activity
│
├── admin/                 # Admin dashboard
│   ├── analytics/         # Usage analytics
│   ├── audit/             # Audit logs
│   │   ├── security/      # Security audit
│   │   └── settings/      # Audit settings
│   ├── auth/              # Auth configuration
│   ├── bots/              # Bot management
│   ├── channels/          # Channel admin
│   │   └── [id]/          # Specific channel
│   ├── commands/          # Slash commands
│   │   ├── [id]/          # Specific command
│   │   └── create/        # Create command
│   ├── compliance/        # Compliance tools
│   │   ├── privacy/       # Privacy settings
│   │   ├── reports/       # Compliance reports
│   │   └── retention/     # Data retention
│   ├── config/            # App configuration
│   ├── export/            # Data export
│   ├── import/            # Data import
│   ├── messages/          # Message admin
│   │   └── history/       # Message history
│   ├── moderation/        # Content moderation
│   ├── permissions/       # Permission matrix
│   ├── roles/             # Role management
│   │   ├── [id]/          # Specific role
│   │   └── create/        # Create role
│   ├── settings/          # Admin settings
│   ├── users/             # User management
│   │   └── [id]/          # Specific user
│   └── webhooks/          # Webhook config
│
├── api/                   # API routes
│   ├── audit/
│   │   └── export/        # Audit export
│   ├── auth/
│   │   ├── signin/        # Sign in endpoint
│   │   └── signup/        # Sign up endpoint
│   ├── compliance/
│   │   ├── delete/        # GDPR delete
│   │   └── export/        # GDPR export
│   ├── config/            # Config API
│   ├── export/            # Data export
│   ├── gif/               # GIF search
│   ├── health/            # Health check
│   ├── import/            # Data import
│   ├── metrics/           # Prometheus metrics
│   ├── ready/             # Readiness check
│   ├── save-svg/          # SVG generation
│   ├── search/            # Search API
│   ├── unfurl/            # URL unfurling
│   ├── upload/
│   │   └── complete/      # Upload finalization
│   └── webhook/
│       └── [id]/          # Specific webhook
│
├── apps/                  # App directory
│   ├── [id]/
│   │   └── settings/      # App settings
│   ├── installed/         # Installed apps
│   └── manage/            # App management
│
├── auth/                  # Auth pages
│   ├── signin/            # Sign in page
│   └── signup/            # Sign up page
│
├── channels/              # Channel pages
│   ├── [id]/
│   │   └── pinned/        # Pinned messages
│   ├── browse/            # Channel browser
│   └── create/            # Create channel
│
├── chat/                  # Chat interface
│   └── channel/
│       └── [slug]/        # Channel by slug
│
├── demo/                  # Demo mode
│
├── dev/                   # Development tools
│   ├── components/
│   │   ├── channels/
│   │   ├── messages/
│   │   └── users/
│   ├── features/
│   └── templates/
│
├── dm/                    # Direct messages
│   ├── [id]/
│   │   ├── files/         # DM files
│   │   ├── media/         # DM media
│   │   └── settings/      # DM settings
│   └── new/               # New DM
│
├── drafts/                # Message drafts
│
├── invite/                # Invite handling
│   └── [code]/            # Invite code
│
├── login/                 # Login page
│
├── meetings/              # Video meetings
│   ├── [id]/              # Specific meeting
│   └── schedule/          # Schedule meeting
│
├── offline/               # Offline page
│
├── onboarding/            # User onboarding
│   ├── complete/          # Onboarding complete
│   └── tour/              # Product tour
│
├── people/                # User directory
│   └── [id]/              # User profile
│
├── profile/               # Current user profile
│   └── edit/              # Edit profile
│
├── saved/                 # Saved items
│   └── collections/
│       └── [id]/          # Specific collection
│
├── settings/              # User settings
│   ├── accessibility/     # Accessibility options
│   ├── account/           # Account settings
│   ├── appearance/        # Theme settings
│   ├── auth-methods/      # Auth configuration
│   ├── data/              # Data settings
│   ├── keyboard/          # Keyboard shortcuts
│   ├── notifications/     # Notification prefs
│   ├── privacy/
│   │   └── location/      # Location privacy
│   ├── profile/           # Profile settings
│   ├── security/          # Security settings
│   ├── setup/             # Re-run setup
│   └── status/            # Status settings
│
├── setup/                 # Setup wizard
│   └── [step]/            # Specific step
│
├── signup/                # Sign up page
│
├── test-env/              # Environment test page
│
├── layout.tsx             # Root layout
├── page.tsx               # Home page
├── loading.tsx            # Global loading
├── error.tsx              # Global error
└── not-found.tsx          # 404 page

src/components/
├── accessibility/         # Accessibility components
│
├── activity/              # Activity feed components
│   └── types/             # Activity types
│
├── admin/                 # Admin dashboard components
│   ├── __tests__/         # Admin component tests
│   ├── roles/             # Role management
│   └── users/             # User management
│   Key files:
│   - admin-nav.tsx        # Admin navigation
│   - users-management.tsx # User admin table
│   - channels-management.tsx
│   - settings-management.tsx
│
├── analytics/             # Analytics dashboard
│   ├── charts/            # Chart components
│   ├── export/            # Export tools
│   ├── overview/          # Overview widgets
│   ├── tables/            # Data tables
│   └── views/             # Analytics views
│
├── app-directory/         # App marketplace
│
├── audit/                 # Audit log components
│
├── auth/                  # Authentication components
│
├── badges/                # Badge components
│
├── bookmarks/             # Bookmark components
│
├── bots/                  # Bot management UI
│
├── channel/               # Channel components
│   └── __tests__/
│   Key files:
│   - channel-item.tsx     # Channel list item
│   - channel-category.tsx # Category wrapper
│   - channel-list.tsx     # Full listing
│   - channel-header.tsx   # Channel header
│   - channel-info-panel.tsx
│
├── channels/              # Channel management
│   └── templates/         # Channel templates
│
├── chat/                  # Core chat components
│   └── __tests__/
│   Key files:
│   - message-skeleton.tsx
│   - message-empty.tsx
│   - message-system.tsx
│   - message-reactions.tsx
│   - message-thread-preview.tsx
│   - typing-indicator.tsx
│
├── command-palette/       # Command palette (Cmd+K)
│
├── commands/              # Slash commands UI
│
├── compliance/            # Compliance tools
│
├── connection/            # Connection status
│
├── context-menu/          # Context menu system
│
├── context-menus/         # Predefined context menus
│   Key files:
│   - context-menu-base.tsx
│   - message-context-menu.tsx
│
├── demo/                  # Demo mode components
│
├── desktop/               # Desktop-specific UI
│
├── dev/                   # Development tools
│
├── disappearing/          # Ephemeral message UI
│
├── dm/                    # Direct message components
│
├── drafts/                # Draft management
│
├── editor/                # Rich text editor
│   Key files:
│   - mention-list.tsx     # @mention suggestions
│
├── embeds/                # Social embeds
│
├── emoji/                 # Emoji components
│   Key files:
│   - reaction-picker.tsx
│   - reaction-display.tsx
│   - emoji-button.tsx
│
├── error/                 # Error boundaries
│
├── files/                 # File components
│   Key files:
│   - file-icon.tsx
│
├── forward/               # Message forwarding
│
├── gif/                   # GIF picker
│
├── i18n/                  # Internationalization UI
│
├── import-export/         # Data import/export
│
├── invite/                # Invite UI
│
├── keyboard/              # Keyboard shortcuts UI
│
├── landing/               # Landing page
│   Key files:
│   - landing-page.tsx
│   - hero-section.tsx
│   - features-section.tsx
│   - pricing-section.tsx
│   - navigation.tsx
│   - footer.tsx
│
├── layout/                # Layout components
│   └── __tests__/
│   Key files:
│   - header.tsx
│   - sidebar.tsx
│   - chat-layout.tsx
│
├── link-preview/          # URL preview cards
│
├── loading/               # Loading states
│
├── location/              # Location sharing
│
├── media/                 # Media viewer
│
├── meetings/              # Video meeting UI
│
├── mentions/              # Mention components
│
├── message-history/       # Message history
│
├── mobile/                # Mobile-specific UI
│
├── modals/                # Modal dialogs
│   Key files:
│   - create-channel-modal.tsx
│
├── moderation/            # Moderation tools
│
├── notifications/         # Notification UI
│   Key files:
│   - types.ts
│   - mention-badge.tsx
│   - unread-badge.tsx
│   - notification-bell.tsx
│   - notification-empty.tsx
│
├── offline/               # Offline mode UI
│
├── onboarding/            # Onboarding components
│
├── pinned/                # Pinned messages
│
├── polls/                 # Poll components
│
├── presence/              # Presence indicators
│
├── pwa/                   # PWA components
│
├── reminders/             # Reminder UI
│
├── saved/                 # Saved items
│
├── scheduled/             # Scheduled messages
│
├── search/                # Search components
│   Key files:
│   - search-input.tsx
│   - search-filters.tsx
│   - search-result-message.tsx
│   - search-result-file.tsx
│
├── settings/              # Settings components
│   Key files:
│   - settings-layout.tsx
│   - settings-section.tsx
│   - settings-row.tsx
│   - avatar-upload.tsx
│   - theme-selector.tsx
│   - language-selector.tsx
│   - timezone-selector.tsx
│
├── setup/                 # Setup wizard
│   └── steps/             # Individual steps
│   Key files:
│   - setup-wizard.tsx
│   - progress-stepper.tsx
│   - step-breadcrumb.tsx
│   - icon-generator-modal.tsx
│   - logo-generator-modal.tsx
│   Step files:
│   - welcome-step.tsx
│   - owner-info-step.tsx
│   - branding-step.tsx
│   - theme-step.tsx
│   - landing-page-step.tsx
│   - auth-methods-step.tsx
│   - access-permissions-step.tsx
│   - features-step.tsx
│   - review-step.tsx
│
├── slash-commands/        # Slash command UI
│
├── stickers/              # Sticker picker
│
├── thread/                # Thread components
│   Key files:
│   - thread-header.tsx
│   - thread-participants.tsx
│
├── ui/                    # Base UI components
│   └── __tests__/
│   Key files (Radix-based):
│   - alert.tsx
│   - alert-dialog.tsx
│   - avatar.tsx
│   - badge.tsx
│   - button.tsx
│   - card.tsx
│   - dialog.tsx
│   - dropdown-menu.tsx
│   - enhanced-input.tsx
│   - input.tsx
│   - label.tsx
│   - popover.tsx
│   - progress.tsx
│   - radio-group.tsx
│   - scroll-area.tsx
│   - select.tsx
│   - separator.tsx
│   - skeleton.tsx
│   - switch.tsx
│   - tabs.tsx
│   - textarea.tsx
│   - tooltip.tsx
│
├── upload/                # Upload components
│
├── user/                  # User components
│   Key files:
│   - user-avatar.tsx
│   - user-presence-dot.tsx
│   - user-status.tsx
│   - user-profile-card.tsx
│   - user-profile-modal.tsx
│   - role-badge.tsx
│
├── users/                 # User list components
│
├── voice/                 # Voice message UI
│
├── webhooks/              # Webhook configuration
│
├── white-label/           # White-label components
│
├── workflows/             # Workflow builder
│   └── steps/             # Workflow steps
│
├── dev-mode-banner.tsx    # Dev mode indicator
├── theme-injector.tsx     # CSS variable injection
└── theme-toggle.tsx       # Dark mode toggle

src/hooks/
├── __tests__/             # Hook tests
│   ├── use-channels.test.tsx
│   └── use-messages.test.ts
│
├── graphql/               # GraphQL-based hooks
│   ├── index.ts           # Export barrel
│   ├── use-channels.ts
│   ├── use-messages.ts
│   ├── use-threads.ts
│   ├── use-reactions.ts
│   ├── use-users.ts
│   ├── use-search.ts
│   └── use-notifications.ts
│
├── index.ts               # Export barrel
│
# Core hooks
├── use-channels.ts        # Channel operations
├── use-messages.ts        # Message operations
├── use-thread.ts          # Thread operations
├── use-notifications.ts   # Notifications
├── use-unread-counts.ts   # Unread tracking
├── use-toast.tsx          # Toast system
├── use-role.ts            # Role access
├── use-permissions.ts     # Permission checks
│
# Utility hooks
├── use-media-query.ts     # Responsive breakpoints
├── use-debounce.ts        # Debounced values
├── use-local-storage.ts   # localStorage sync
├── use-click-outside.ts   # Outside click
├── use-scroll-position.ts # Scroll tracking
├── use-intersection-observer.ts
├── use-clipboard.ts       # Clipboard ops
├── use-online-status.ts   # Network status
├── use-window-focus.ts    # Window focus
├── use-previous.ts        # Previous value
├── use-mounted.ts         # Mount state
├── use-hotkey.ts          # Keyboard shortcuts
│
# Keyboard hooks
├── use-global-shortcuts.ts
├── use-message-shortcuts.ts
├── use-editor-shortcuts.ts
│
# Feature hooks
├── use-app-init.tsx       # App initialization
├── use-pwa.ts             # PWA utilities
├── use-chat-init.ts       # Chat init
├── use-channel-init.ts    # Channel init
├── use-demo.ts            # Demo mode
├── use-disappearing-messages.ts
│
# Draft hooks
├── useDraft.ts
├── useDrafts.ts
├── useAutosave.ts
│
# Connection hooks
├── useConnectionStatus.ts
├── useOfflineQueue.ts
├── useOfflineCache.ts
│
# Media hooks
├── useMediaGallery.ts
├── useMediaViewer.ts
│
# Command hooks
├── useCommandPalette.ts
├── useQuickSwitch.ts
│
# Content hooks
├── useLinkPreview.ts
├── useUnfurl.ts
├── useEditHistory.ts
├── useMessageVersions.ts
│
# Activity hooks
├── useActivity.ts
├── useActivityFeed.ts
├── useUnreadActivity.ts
│
# Emoji hooks
├── useEmojiAutocomplete.ts
├── useEmojiSearch.ts
├── useRecentEmojis.ts
│
# Mention hooks
├── useMentionAutocomplete.ts
├── useUnreadMentions.ts
│
# Onboarding hooks
├── useOnboarding.ts
├── useTour.ts
├── useFeatureDiscovery.ts
│
# Desktop hooks
├── useTauri.ts
├── useElectron.ts
├── useElectronWindow.ts
├── useElectronMenu.ts
├── useElectronStore.ts
├── useElectronNotifications.ts
├── useElectronUpdater.ts
├── useNativeMenu.ts
├── useSystemTray.ts
├── useNativeNotifications.ts
│
# Meeting hooks
├── useMeetings.ts
└── useHuddle.ts

src/lib/
├── __tests__/             # Library tests
│
├── accessibility/         # A11y utilities
├── activity/              # Activity tracking
├── admin/                 # Admin utilities
│   ├── roles/
│   └── users/
├── analytics/             # Analytics utilities
├── api/                   # API utilities
├── apollo/                # Apollo client config
├── app-directory/         # App marketplace
├── audit/                 # Audit logging
├── auth/                  # Auth utilities
│   └── providers/         # OAuth providers
├── badges/                # Badge utilities
├── bookmarks/             # Bookmark utilities
├── bots/                  # Bot SDK
│   └── examples/          # Example bots
├── branding/              # Branding utilities
├── channels/              # Channel utilities
├── command-palette/       # Cmd+K utilities
├── commands/              # Slash commands
├── compliance/            # GDPR/compliance
├── context-menu/          # Context menu utils
├── demo/                  # Demo mode data
├── disappearing/          # Ephemeral messages
├── dm/                    # DM utilities
├── drafts/                # Draft management
├── editor/                # Editor utilities
├── electron/              # Electron utilities
├── embeds/                # Social embeds
├── emoji/                 # Emoji utilities
├── error/                 # Error handling
├── features/              # Feature flags
│   ├── components/
│   └── hooks/
├── forward/               # Message forwarding
├── gif/                   # GIF utilities
├── i18n/                  # i18n utilities
├── import-export/         # Data import/export
├── invite/                # Invite utilities
├── keyboard/              # Keyboard shortcuts
├── link-preview/          # URL unfurling
├── location/              # Location utilities
├── media/                 # Media utilities
├── meetings/              # Meeting utilities
├── mentions/              # Mention utilities
├── message-history/       # Message history
├── messages/              # Message utilities
├── mobile/                # Mobile utilities
├── modals/                # Modal utilities
├── moderation/            # Moderation utilities
├── notifications/         # Notification utilities
├── offline/               # Offline support
├── onboarding/            # Onboarding utilities
├── pinned/                # Pinned messages
├── polls/                 # Poll utilities
├── presence/              # Presence utilities
├── pwa/                   # PWA utilities
├── reminders/             # Reminder utilities
├── saved/                 # Saved items
├── scheduled/             # Scheduled messages
├── security/              # Security utilities
├── settings/              # Settings utilities
├── slash-commands/        # Slash command utils
├── socket/                # Socket.io client
│   ├── hooks/
│   └── providers/
├── stickers/              # Sticker utilities
├── storage/               # File storage
├── tauri/                 # Tauri utilities
├── upload/                # Upload utilities
├── users/                 # User utilities
├── utils/                 # General utilities
├── voice/                 # Voice utilities
├── webhooks/              # Webhook utilities
├── white-label/           # White-label utils
├── workflows/             # Workflow engine
│   └── examples/
│
# Core files
├── apollo-client.ts       # Apollo client setup
├── environment.ts         # Environment detection
├── icon-symbols.ts        # Icon mappings
├── nhost.ts               # Nhost client
├── svg-generator.ts       # SVG generation
├── theme-presets.ts       # Theme definitions
├── unicode-symbols.ts     # Unicode mappings
└── utils.ts               # Core utilities (cn, etc.)

src/bots/
├── hello-bot/             # Example greeting bot
├── poll-bot/              # Poll creation bot
├── reminder-bot/          # Reminder bot
└── welcome-bot/           # New member bot

src/config/
├── app-config.ts          # AppConfig interface & defaults
└── auth.config.ts         # Auth configuration & test users

src/contexts/
├── __tests__/
│   ├── auth-context.test.tsx
│   └── theme-context.test.tsx
├── app-config-context.tsx
├── auth-context.tsx
└── theme-context.tsx

src/graphql/
├── activity/              # Activity queries
├── admin/                 # Admin queries
├── analytics/             # Analytics queries
├── apps/                  # App directory
├── audit/                 # Audit log queries
├── channels/              # Channel queries
├── commands/              # Command queries
├── compliance/            # Compliance queries
├── disappearing/          # Ephemeral queries
├── dm/                    # DM queries
├── location/              # Location queries
├── media/                 # Media queries
├── meetings/              # Meeting queries
├── messages/              # Message queries
├── mutations/             # Core mutations
│   └── messages.ts
├── notifications/         # Notification queries
├── onboarding/            # Onboarding queries
├── pinned/                # Pinned queries
├── presence/              # Presence queries
├── queries/               # Core queries
│   ├── channels.ts
│   └── messages.ts
├── saved/                 # Saved items
├── settings/              # Settings queries
├── users/                 # User queries
├── app-config.ts          # Config operations
└── fragments.ts           # Shared fragments

src/locales/
├── ar/                    # Arabic
├── de/                    # German
├── en/                    # English
├── es/                    # Spanish
├── fr/                    # French
├── ja/                    # Japanese
├── pt/                    # Portuguese
├── ru/                    # Russian
└── zh/                    # Chinese

src/providers/
├── apollo-provider.tsx
└── nhost-provider.tsx

src/services/
└── auth/
    ├── providers/         # OAuth providers
    ├── database-auth.service.ts
    ├── faux-auth.service.ts
    ├── nhost-auth.service.ts
    └── real-auth.service.ts

src/shared/
├── constants/             # Shared constants
├── hooks/                 # Shared hooks
├── types/                 # Shared types
└── utils/                 # Shared utilities

src/stores/
├── __tests__/
└── ...                    # Zustand stores

src/styles/
└── globals.css            # Global styles

src/templates/
├── default/               # Default template
│   ├── components/
│   └── config.ts
├── discord/               # Discord-style
│   ├── channel/
│   ├── components/
│   ├── features/
│   ├── layout/
│   ├── message/
│   ├── server/
│   ├── styles/
│   ├── theme/
│   └── user/
├── hooks/                 # Template hooks
│   └── use-template.tsx
├── slack/                 # Slack-style
│   └── components/
├── telegram/              # Telegram-style
│   ├── chat-list/
│   ├── components/
│   ├── compose/
│   ├── features/
│   ├── layout/
│   ├── messages/
│   ├── styles/
│   └── theme/
├── whatsapp/              # WhatsApp-style
│   ├── components/
│   └── styles/
├── index.ts
└── types.ts

src/types/
├── api.ts                 # API types
├── attachment.ts          # Attachment types
├── bot.ts                 # Bot types
├── channel.ts             # Channel types
├── config.ts              # Config types
├── emoji.ts               # Emoji types
├── gif.ts                 # GIF types
├── index.ts               # Export barrel
├── message.ts             # Message types
├── notification.ts        # Notification types
├── poll.ts                # Poll types
├── search.ts              # Search types
├── socket.ts              # Socket types
├── sticker.ts             # Sticker types
├── user.ts                # User types
└── webhook.ts             # Webhook types