Frontend Documentation

Frontend Documentation

The AI Code Task frontend is a custom Lovelace card developed using modern JavaScript (ES6+), Vanilla CSS, and web components. It is designed to be responsive, high-performance, and visually integrated with the Home Assistant UI.

🎨 UI Overview

The card uses a dual-pane layout:

• Left Pane: Chat interface for interacting with AI models.
• Right Pane: Contextual workspace containing the File Explorer and the Code Editor.

Responsive Design

The card automatically adjusts its layout based on the available width:

• Desktop: Side-by-side layout.
• Tablet: Adjusted proportions for touch targets.
• Mobile: Stacked layout (Chat above/below Editor).

🧩 Components

1. Chat Interface (ChatPane)

• Message List: rendered using Markdown with code highlighting.
• Input Area: Supports multi-line input and entity attachment.
• Provider Selector: Allows switching between available ai_task providers (e.g., xAI Conversation).

2. File Explorer (FileExplorer)

• Tree View: Navigates the /config directory.
• File Icons: Visual indicators for different file types (YAML, Python, Markdown, etc.).
• Auto-context: Files can be "pinned" to the chat to provide context to the AI.

3. Code Editor (CodeEditor)

• Monaco-like Experience: Provides syntax highlighting and basic editing features.
• Direct Save: Integrates with the backend (ai_code_task/file_save) to save changes directly to disk.
• Automatic Badge Linking: If the AI suggests a modification to a specific file, a badge in the chat links directly to that file in the editor.

💅 Styling & Themes

The card uses Vanilla CSS with CSS Variables to ensure compatibility with all Home Assistant themes (Light, Dark, and Custom).

Constant	CSS Variable	Description
Primary Color	--primary-color	Used for buttons and highlights.
Background	--card-background-color	The main background of the card.
Border Radius	--ha-card-border-radius	Keeps the card consistent with the global UI setup.

🧠 State Management

The frontend synchronizes its state with the backend:

• Chat History: Server-side persistence. Messages are stored on disk by the integration and synchronized on load via ws_sync_history. This ensures history is available across devices.
• Active File: The path and content of the file currently open in the editor.
• Attached Entities: A list of HA entities whose states are being sent to the AI.

🚀 Key Features

Smooth Scrolling

The chat history implements an intelligent auto-scroll that only triggers if the user hasn't manually scrolled up to read previous messages.

Markdown Rendering

Uses a custom implementation to handle standard Markdown, fenced code blocks, and special Home Assistant integration badges.