UI Components

KOSMOS frontend components built with React, TypeScript, and Tailwind CSS.

Auto-Generated

This documentation is automatically extracted from component source files.

Component Library

Component	File	Client	Props
Sidebar	implementation/frontend/src/components/Sidebar.tsx	Yes	2
SidebarItem	implementation/frontend/src/components/Sidebar.tsx	Yes	0
ConversationView	implementation/frontend/src/components/ConversationView.tsx	Yes	0
WelcomeMessage	implementation/frontend/src/components/ConversationView.tsx	Yes	0
SuggestionChip	implementation/frontend/src/components/ConversationView.tsx	Yes	0
MessageBubble	implementation/frontend/src/components/ConversationView.tsx	Yes	0
TypingIndicator	implementation/frontend/src/components/ConversationView.tsx	Yes	0
DashboardShell	implementation/frontend/src/components/DashboardShell.tsx	Yes	3
AppLayout	implementation/frontend/src/components/AppLayout.tsx	Yes	4
StatusBar	implementation/frontend/src/components/StatusBar.tsx	Yes	0
StatusItem	implementation/frontend/src/components/StatusBar.tsx	Yes	0
CommandInput	implementation/frontend/src/components/CommandInput.tsx	Yes	0
QuickAction	implementation/frontend/src/components/CommandInput.tsx	Yes	0
AgentPanel	implementation/frontend/src/components/AgentPanel.tsx	Yes	0
AgentCard	implementation/frontend/src/components/AgentPanel.tsx	Yes	0
PentarchyBadge	implementation/frontend/src/components/AgentPanel.tsx	Yes	0
NotFound	implementation/frontend/src/app/not-found.tsx	No	0
SafeWebSocketProvider	implementation/frontend/src/app/providers.tsx	Yes	0
SafeAgentProvider	implementation/frontend/src/app/providers.tsx	Yes	0
SafeSDUIProvider	implementation/frontend/src/app/providers.tsx	Yes	0
Providers	implementation/frontend/src/app/providers.tsx	Yes	0
Loading	implementation/frontend/src/app/loading.tsx	No	0
GlobalError	implementation/frontend/src/app/global-error.tsx	Yes	0
Error	implementation/frontend/src/app/error.tsx	Yes	0
RootLayout	implementation/frontend/src/app/layout.tsx	No	0
Home	implementation/frontend/src/app/page.tsx	Yes	0

Sidebar

Source: implementation/frontend/src/components/Sidebar.tsx

Client Component

This is a client-side component using React hooks.

Props

Prop	Type	Required	Description
collapsed	boolean	Yes	-
onToggle	() => void	Yes	-

Usage

import { Sidebar } from '@/components/Sidebar';

function MyPage() {
  return <Sidebar collapsed={...} onToggle={...} />;
}

SidebarItem

Source: implementation/frontend/src/components/Sidebar.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { SidebarItem } from '@/components/SidebarItem';

function MyPage() {
  return <SidebarItem />;
}

ConversationView

Source: implementation/frontend/src/components/ConversationView.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { ConversationView } from '@/components/ConversationView';

function MyPage() {
  return <ConversationView />;
}

WelcomeMessage

Source: implementation/frontend/src/components/ConversationView.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { WelcomeMessage } from '@/components/WelcomeMessage';

function MyPage() {
  return <WelcomeMessage />;
}

SuggestionChip

Source: implementation/frontend/src/components/ConversationView.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { SuggestionChip } from '@/components/SuggestionChip';

function MyPage() {
  return <SuggestionChip />;
}

MessageBubble

Source: implementation/frontend/src/components/ConversationView.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { MessageBubble } from '@/components/MessageBubble';

function MyPage() {
  return <MessageBubble />;
}

TypingIndicator

Source: implementation/frontend/src/components/ConversationView.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { TypingIndicator } from '@/components/TypingIndicator';

function MyPage() {
  return <TypingIndicator />;
}

DashboardShell

Source: implementation/frontend/src/components/DashboardShell.tsx

Client Component

This is a client-side component using React hooks.

Props

Prop	Type	Required	Description
children	React.ReactNode	Yes	-
title	string	No	-
subtitle	string	No	-

Usage

import { DashboardShell } from '@/components/DashboardShell';

function MyPage() {
  return <DashboardShell children={...} title={...} />;
}

AppLayout

Source: implementation/frontend/src/components/AppLayout.tsx

Client Component

This is a client-side component using React hooks.

Props

Prop	Type	Required	Description
children	React.ReactNode	Yes	-
showHeader	boolean	No	-
headerTitle	string	No	-
headerSubtitle	string	No	-

Usage

import { AppLayout } from '@/components/AppLayout';

function MyPage() {
  return <AppLayout children={...} showHeader={...} />;
}

StatusBar

Source: implementation/frontend/src/components/StatusBar.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { StatusBar } from '@/components/StatusBar';

function MyPage() {
  return <StatusBar />;
}

StatusItem

Source: implementation/frontend/src/components/StatusBar.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { StatusItem } from '@/components/StatusItem';

function MyPage() {
  return <StatusItem />;
}

CommandInput

Source: implementation/frontend/src/components/CommandInput.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { CommandInput } from '@/components/CommandInput';

function MyPage() {
  return <CommandInput />;
}

QuickAction

Source: implementation/frontend/src/components/CommandInput.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { QuickAction } from '@/components/QuickAction';

function MyPage() {
  return <QuickAction />;
}

AgentPanel

Source: implementation/frontend/src/components/AgentPanel.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { AgentPanel } from '@/components/AgentPanel';

function MyPage() {
  return <AgentPanel />;
}

AgentCard

Source: implementation/frontend/src/components/AgentPanel.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { AgentCard } from '@/components/AgentCard';

function MyPage() {
  return <AgentCard />;
}

PentarchyBadge

Source: implementation/frontend/src/components/AgentPanel.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { PentarchyBadge } from '@/components/PentarchyBadge';

function MyPage() {
  return <PentarchyBadge />;
}

NotFound

Source: implementation/frontend/src/app/not-found.tsx

Usage

import { NotFound } from '@/components/NotFound';

function MyPage() {
  return <NotFound />;
}

SafeWebSocketProvider

Source: implementation/frontend/src/app/providers.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { SafeWebSocketProvider } from '@/components/SafeWebSocketProvider';

function MyPage() {
  return <SafeWebSocketProvider />;
}

SafeAgentProvider

Source: implementation/frontend/src/app/providers.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { SafeAgentProvider } from '@/components/SafeAgentProvider';

function MyPage() {
  return <SafeAgentProvider />;
}

SafeSDUIProvider

Source: implementation/frontend/src/app/providers.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { SafeSDUIProvider } from '@/components/SafeSDUIProvider';

function MyPage() {
  return <SafeSDUIProvider />;
}

Providers

Source: implementation/frontend/src/app/providers.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { Providers } from '@/components/Providers';

function MyPage() {
  return <Providers />;
}

Loading

Source: implementation/frontend/src/app/loading.tsx

Usage

import { Loading } from '@/components/Loading';

function MyPage() {
  return <Loading />;
}

GlobalError

Source: implementation/frontend/src/app/global-error.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { GlobalError } from '@/components/GlobalError';

function MyPage() {
  return <GlobalError />;
}

Error

Source: implementation/frontend/src/app/error.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { Error } from '@/components/Error';

function MyPage() {
  return <Error />;
}

RootLayout

Source: implementation/frontend/src/app/layout.tsx

Usage

import { RootLayout } from '@/components/RootLayout';

function MyPage() {
  return <RootLayout />;
}

Home

Source: implementation/frontend/src/app/page.tsx

Client Component

This is a client-side component using React hooks.

Usage

import { Home } from '@/components/Home';

function MyPage() {
  return <Home />;
}