# UI/UX Design Document: Advanced Second Brain PKM System

This document details the aesthetic and interaction design principles for the Advanced Second Brain PKM system, ensuring a critical balance between **data density**, **developer experience (UX)**, and **consumer usability**. The design is intended to support deep, focused work.

## 1. Design Philosophy & Aesthetics

The aesthetic is centered around a high-contrast, dark-mode environment, prioritizing function and clarity. This approach is specifically chosen to reduce eye strain during long work sessions involving code, data, and extensive reading.

| Aspect | Principle | Details |
| :--- | :--- | :--- |
| **Theme** | Dark Mode by default. | Utilizes deep charcoal backgrounds (`#121212`, `#1E1E1E`) to create a tool-like, focused environment. |
| **Contrast** | High-contrast text. | Ensures optimal readability against the dark background for all content. |
| **Typography** | Dual Font Strategy. | A clean sans-serif (e.g., Inter or Roboto) is used for general UI elements, while a highly readable monospaced font (e.g., Fira Code or JetBrains Mono) is reserved for all code, REPLs, and data outputs to enhance the developer experience. |

### Color Accents for Functional Cues

Neon accents are strategically employed to denote state, function, and active elements, providing immediate visual feedback without cluttering the interface. **Cyan** is designated for Dana code and IDE elements, clearly marking the agent logic components. **Purple** is used for orchestration and agent management interfaces, highlighting the system's multi-agent communication layer. Finally, **Emerald** is reserved for "Fabric" analysis outputs and system success states, drawing the user's attention to extracted insights and positive system feedback.

## 2. Layout and Structure

The layout is designed to manage high data density through a persistent anchor and a highly flexible, multi-pane main content area.

### 2.1. Global Navigation Sidebar

The sidebar is a narrow, persistent element on the far left of every screen, serving as the user's primary anchor. Its purpose is to provide immediate access to the highest-level views (Dashboard, Global Chat, Settings) and facilitate rapid context switching between knowledge domains.

### 2.2. Domain Workspace Layout (Knowledge Browser Mode)

This mode, the core reading and analysis view, employs a classic three-pane structure to maximize simultaneous information display and support the user's need to view documents, graphs, and code concurrently.

| Pane Name | Position | Width | Function |
| :--- | :--- | :--- | :--- |
| **Pane 1: The Drawer** | Far Left | 250px (Collapsible) | **Context/Source Management**. Displays the file tree of the local domain directory (e.g., `Papers`, `Notes`, `Media`), acting as the source selector. |
| **Pane 2: Content Viewer** | Middle | Flexible (Largest) | **Primary Content Display**. Renders the selected file (PDF, Markdown, Video) in a clean, distraction-free environment. |
| **Pane 3: Insight/Fabric** | Right | 400px (Collapsible) | **AI-Generated Analysis**. Displays structured, on-demand analysis of the content in the Content Viewer, generated by "Fabric" patterns. |

### 2.3. Domain Workspace Layout (Agent Studio Mode)

This mode is optimized for the **Developer UX**, mimicking a modern Integrated Development Environment (IDE) structure with distinct panels for context management, code editing, and execution.

## 3. Key Interaction Patterns

Interaction design focuses on intuitive access to complex features:

*   **Video Interaction**: Video content in the Content Viewer must feature a synchronized, interactive transcript below the player. This allows users to navigate the video by clicking text, directly linking the visual and textual data streams.
*   **Ubiquitous Chat**: A floating chat bubble overlay provides immediate, context-aware access to the domain agent for questions about the currently open document, ensuring that help and analysis are always one click away.
*   **Orchestrator Scope**: The **Global Orchestrator Chat** utilizes a clear, multi-select checkbox interface to define the scope of the query, making complex, cross-domain searches intuitive and explicit for the user.