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>
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { MessageSquare, Plus } from 'lucide-react';
|
|
|
|
interface Conversation {
|
|
id: string;
|
|
title: string;
|
|
lastMessage: string;
|
|
timestamp: string;
|
|
}
|
|
|
|
export default function WorkspacePage() {
|
|
const [conversations] = useState<Conversation[]>([
|
|
{
|
|
id: '1',
|
|
title: 'Getting Started with BlackRoad OS',
|
|
lastMessage: 'How can I help you today?',
|
|
timestamp: '2 hours ago',
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Project Planning',
|
|
lastMessage: 'Let me summarize the key tasks...',
|
|
timestamp: 'Yesterday',
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<div className="h-full p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-semibold text-gray-900 mb-2">
|
|
Conversations
|
|
</h1>
|
|
<p className="text-gray-600">
|
|
Continue your conversations with Lucidia or start a new one
|
|
</p>
|
|
</div>
|
|
|
|
{/* Empty state or conversation list */}
|
|
{conversations.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-20">
|
|
<div className="h-24 w-24 rounded-full bg-gray-100 flex items-center justify-center mb-6">
|
|
<MessageSquare className="h-12 w-12 text-gray-400" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
|
No conversations yet
|
|
</h3>
|
|
<p className="text-gray-600 mb-6 text-center max-w-md">
|
|
Start your first conversation with Lucidia to begin collaborating on your projects
|
|
</p>
|
|
<button className="flex items-center gap-2 px-6 py-3 bg-blue-800 hover:bg-blue-700 text-white rounded-md font-medium transition-colors">
|
|
<Plus className="h-5 w-5" />
|
|
New Conversation
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{conversations.map((conversation) => (
|
|
<div
|
|
key={conversation.id}
|
|
className="bg-white border border-gray-200 rounded-lg p-6 hover:border-blue-800 hover:shadow-md transition-all cursor-pointer"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue-800 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
|
|
<MessageSquare className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-gray-900 mb-1 truncate">
|
|
{conversation.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 line-clamp-2 mb-2">
|
|
{conversation.lastMessage}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{conversation.timestamp}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|