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>
42 lines
898 B
TypeScript
42 lines
898 B
TypeScript
import { create } from 'zustand';
|
|
|
|
interface Workspace {
|
|
id: string;
|
|
name: string;
|
|
plan: 'free' | 'pro' | 'enterprise';
|
|
memberCount: number;
|
|
}
|
|
|
|
interface WorkspaceState {
|
|
currentWorkspace: Workspace | null;
|
|
workspaces: Workspace[];
|
|
setCurrentWorkspace: (workspace: Workspace) => void;
|
|
fetchWorkspaces: () => Promise<void>;
|
|
}
|
|
|
|
export const useWorkspaceStore = create<WorkspaceState>((set) => ({
|
|
currentWorkspace: null,
|
|
workspaces: [],
|
|
|
|
setCurrentWorkspace: (workspace) => {
|
|
set({ currentWorkspace: workspace });
|
|
},
|
|
|
|
fetchWorkspaces: async () => {
|
|
// TODO: Replace with actual API call
|
|
const mockWorkspaces: Workspace[] = [
|
|
{
|
|
id: 'default-workspace',
|
|
name: 'My Workspace',
|
|
plan: 'pro',
|
|
memberCount: 1,
|
|
},
|
|
];
|
|
|
|
set({
|
|
workspaces: mockWorkspaces,
|
|
currentWorkspace: mockWorkspaces[0],
|
|
});
|
|
},
|
|
}));
|