Skip to main content
The Chat Interface is the primary operational surface of the Palyra Web Dashboard. It provides a multi-column workspace designed to handle complex agentic workflows, including long-running streaming runs, manual approvals, session branching, and context management without cluttering the main conversation transcript.

Workspace Architecture

The chat interface is orchestrated by ChatConsolePanel apps/web/src/chat/ChatConsolePanel.tsx#81-88, which coordinates several specialized hooks and components to manage state across the transcript, composer, and inspector.

Key Components

ComponentResponsibility
ChatConsolePanelTop-level orchestrator for the chat workspace apps/web/src/chat/ChatConsolePanel.tsx#81.
ChatConsoleWorkspaceViewLayout definition for the three-column view (Sessions, Conversation, Inspector) apps/web/src/chat/ChatConsoleWorkspaceView.tsx#50.
ChatComposerMulti-functional input field with support for slash commands, attachments, and budget previews apps/web/src/chat/ChatComposer.tsx#66.
ChatTranscriptHigh-performance renderer for conversational entries and tool outputs apps/web/src/chat/ChatTranscript.tsx#9.
ChatInspectorColumnSidebar for out-of-band data: A2UI surfaces, background tasks, and run tapes apps/web/src/chat/ChatInspectorColumn.tsx#109.

Data Flow: Chat Workspace

The following diagram illustrates how user input and server events flow through the React component tree. Chat Workspace Data Flow Sources: apps/web/src/chat/ChatConsolePanel.tsx#125-168, apps/web/src/chat/ChatConsoleWorkspaceView.tsx#142-190, apps/web/src/chat/useChatRunStream.ts#59

Slash Command Pipeline

Palyra uses a unified slash command system shared between the Web UI and the TUI apps/web/src/chat/chatCommandRegistry.ts#3-18. Commands can be executed locally in the browser or dispatched to the server.

Command Resolution

  1. Parsing: parseSlashCommand extracts the command name and arguments apps/web/src/chat/chatShared.tsx#76-79.
  2. Suggestions: buildSlashSuggestions provides autocomplete for commands and entities (sessions, objectives, profiles) apps/web/src/chat/chatCommandSuggestions.ts#60-98.
  3. Execution: executeChatSlashCommand routes the command to specific handlers like branchCurrentSessionAction or createUndoCheckpoint apps/web/src/chat/chatSlashActions.ts#147-186.
Command Pipeline Entity Map Sources: apps/web/src/chat/chatCommandRegistry.ts#20-31, apps/web/src/chat/chatCommandSuggestions.ts#60-98, apps/web/src/chat/chatSlashActions.ts#147-186

Session and Run Management

Session Branching

Branching allows an operator to fork a conversation into a new session from a specific point in the lineage. This is handled by branchCurrentSessionAction apps/web/src/chat/chatSessionActions.ts#153-167, which calls the api.branchSession endpoint.

Run Streaming and Interruption

Runs are managed via useChatRunStream apps/web/src/chat/useChatRunStream.ts#59, which handles the NDJSON event stream from the gateway.

Context Budget System

The interface tracks the “Context Budget” to prevent LLM context window overflows. The useChatContextBudget hook calculates tokens for the baseline history, current draft, and active attachments apps/web/src/chat/chatShared.tsx#61-72.

Media and Artifact Pipeline

The chat interface supports a sophisticated pipeline for handling files and derived artifacts.

Attachment Handling

useChatAttachmentUploadHandler manages the lifecycle of uploading files to the session apps/web/src/chat/chatInspectorActions.ts#35. Attachments are represented as ComposerAttachment objects containing metadata and preview URLs apps/web/src/chat/chatShared.tsx#45-59.

Compaction and Checkpoints

To manage long transcripts, the system supports:

Inspector and A2UI

The ChatInspectorColumn apps/web/src/chat/ChatInspectorColumn.tsx#109 serves as a secondary display for non-conversational data: Sources: apps/web/src/chat/ChatConsolePanel.tsx#102-122, apps/web/src/chat/ChatInspectorColumn.tsx#159-217, apps/web/src/chat/chatShared.tsx#82-95