Initial Phase 1 Alpha build for app.blackroad.io

This commit establishes the foundation for the BlackRoad OS web application,
the primary SaaS product for human-AI collaboration.

1. Authentication System
   - Login and signup pages with email/password
   - Zustand state management for auth
   - Workspace-based user model
   - Protected route handling

2. App Shell
   - Sidebar navigation (Conversations, Agents, Governance, Account)
   - App header with workspace and user info
   - Layout with authentication guards
   - Responsive design with Tailwind CSS

3. Conversation Interface
   - Chat UI with message bubbles
   - User and assistant message rendering
   - Real-time timestamp display
   - Loading states and animations
   - Placeholder for WebSocket integration

4. Core Dependencies
   - Next.js 16 with App Router
   - Zustand for state management
   - TanStack Query (ready for API calls)
   - Lucide React icons
   - Tailwind CSS 4 with custom utilities

5. Workspace Management
   - Multi-tenant workspace structure
   - Workspace store with Zustand
   - Plan-based workspace model (Free, Pro, Enterprise)

Structure:
app/
  ├── (auth)/          # Authentication routes
  │   ├── login/
  │   └── signup/
  ├── (app)/           # Protected app routes
  │   ├── conversations/[id]/
  │   ├── workspace/
  │   └── layout.tsx
  └── page.tsx         # Redirects to login

components/
  ├── Sidebar.tsx      # Main navigation
  └── AppHeader.tsx    # Workspace header

stores/
  ├── auth-store.ts    # Authentication state
  └── workspace-store.ts

lib/
  └── cn.ts            # Tailwind merge utility

Next Steps:
- Integrate WebSocket streaming for real-time AI responses
- Connect to BlackRoad OS backend API
- Add agent management interface
- Build governance center UI
- Deploy to app.blackroad.io

Phase 1 Alpha Target: Jan 25, 2026

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(app)/layout.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/stores/auth-store';
+import { useWorkspaceStore } from '@/stores/workspace-store';
+import Sidebar from '@/components/Sidebar';
+import AppHeader from '@/components/AppHeader';
+
+export default function AppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const fetchWorkspaces = useWorkspaceStore((state) => state.fetchWorkspaces);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/login');
+    } else {
+      fetchWorkspaces();
+    }
+  }, [isAuthenticated, router, fetchWorkspaces]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <AppHeader />
+        <main className="flex-1 overflow-y-auto bg-gray-50">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}