2ab0d60400
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>
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useAuthStore } from '@/stores/auth-store';
|
|
import { useWorkspaceStore } from '@/stores/workspace-store';
|
|
|
|
export default function AppHeader() {
|
|
const user = useAuthStore((state) => state.user);
|
|
const currentWorkspace = useWorkspaceStore((state) => state.currentWorkspace);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-10 border-b border-gray-200 bg-white">
|
|
<div className="flex h-16 items-center justify-between px-6">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
{currentWorkspace?.name || 'Workspace'}
|
|
</h2>
|
|
<p className="text-sm text-gray-500">
|
|
{currentWorkspace?.plan.toUpperCase()} Plan
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-800 to-blue-600 flex items-center justify-center text-white text-sm font-semibold">
|
|
{user?.name?.[0]?.toUpperCase() || 'U'}
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<p className="text-sm font-medium text-gray-900">{user?.name}</p>
|
|
<p className="text-xs text-gray-500">{user?.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|