Brachnha/brachnha-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): implement 'Twilight Velvet' dark theme and fix visibility issues

Browse Source 
- Add 'Twilight Velvet' color palette to globals.css with OKLCH values
- Update SettingsPage headers, cards, and dialogs to use semantic theme variables
- Update HistoryCard, HistoryFeed, and DraftContent to support dark mode
- Update ProviderSelector and ProviderList to use custom card background (#2A2A3D)
- Add ThemeToggle component with improved visibility
- Ensure consistent use of 'bg-card', 'text-foreground', and 'text-muted-foreground'
This commit is contained in:
Max
2026-01-27 11:03:55 +07:00
parent e9e6fadb1d
commit 9b79856827
49 changed files with 2411 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_bmad-output/planning-artifacts/prd.md
View File

@@ -30,16 +30,16 @@ editHistory:
changes: 'Added "Bring Your Own AI" (BYOD) Support: Custom Providers, API Key Management, and Settings.'
---
# Product Requirements Document - Test01
# Product Requirements Document - Brachnha
**Author:** Max
**Date:** 2026-01-20
## Executive Summary
**Product Vision:** "Test01" (The Pocket Mentor) is a Progressive Web App (PWA) designed to transform the daily struggles of learning into a polished "Legacy Log" of insights. It targets bootcamp graduates and self-learners who need to document their growth for recruiters but lack the energy to write from scratch.
**Product Vision:** "Brachnha" (The Pocket Mentor) is a Progressive Web App (PWA) designed to transform the daily struggles of learning into a polished "Journey Log" of insights. It targets bootcamp graduates and self-learners who need to document their growth for recruiters but lack the energy to write from scratch.
**Core Innovation:** Unlike passive note apps or raw AI writers, Test01 uses a **Dual-Agent Pipeline** ("Teacher" + "Ghostwriter"). It actively interviews the user to extract the "Lesson" from the "Complaint" ("Venting"), then synthesizing it into high-quality personal branding content.
**Core Innovation:** Unlike passive note apps or raw AI writers, Brachnha uses a **Dual-Agent Pipeline** ("Teacher" + "Ghostwriter"). It actively interviews the user to extract the "Lesson" from the "Complaint" ("Venting"), then synthesizing it into high-quality personal branding content.
**Key Value:** Turns "I feel stupid today" into "Here is what I learned today."
@@ -117,6 +117,10 @@ The goal is to prove that the *experience* of "guided enlightenment" is cleaner,
* **Risk:** Users find the "Teacher" questions annoying/blocking.
* **Mitigation:** Implement a "Fast Track" / "Just Write It" button in the UI to skip the interview if the user is ready.
**Security Risks:**
* **Risk:** Public deployment on VPS exposes personal journal.
* **Mitigation:** Implement "Gatekeeper" Authentication (NFR-09) to lock the app via `APP_PASSWORD`.
**Usability Risks:**
* **Risk:** "Bring Your Own AI" configuration is too complex for non-technical users.
* **Mitigation:** Provide clear, step-by-step guides for getting API keys. Pre-fill common provider templates (DeepSeek, OpenAI) so users only paste the key.
@@ -128,7 +132,7 @@ The goal is to prove that the *experience* of "guided enlightenment" is cleaner,
```mermaid
sequenceDiagram
participant User as Alex (Learner)
participant UI as Test01 App
participant UI as Brachnha App
participant Teacher as Teacher Agent
participant Ghost as Ghostwriter Agent
@@ -151,7 +155,7 @@ sequenceDiagram
### Journey 1: The "Legacy Log" (Primary Success)
* **User:** Alex (The Exhausted Learner).
* **Scene:** Alex finishes a deep study session at 11 PM. He's tired but feels a "click" of understanding after hours of struggle.
* **Action:** Opens Test01 to capture the win, not just to vent, but to immortalize the lesson: *"I finally get why dependency injection matters."*
* **Action:** Opens Brachnha to capture the win, not just to vent, but to immortalize the lesson: *"I finally get why dependency injection matters."*
* **System Response:** The "Teacher" agent validates the insight and probes deeper: *"That's a huge breakthrough. What was the 'before' and 'after' mental model in your head?"*
* **Transformation:** Alex articulates the specific shift in his thinking.
* **Result:** The "Ghostwriter" agent drafts: *"The Moment Dependency Injection Clicked for Me."*
@@ -208,9 +212,9 @@ sequenceDiagram
* **Guided Transformation:** The UX pattern of transforming a raw, negative "Complaint" into a structured, positive "Insight" via a conversational interview is a novel interaction model for note-taking apps.
### Market Context & Competitive Landscape
* **vs. Passive Note Apps (Notion/Obsidian):** These require the user to do all the cognitive heaving lifting (synthesis). Test01 is "Active" and pulls the synthesis out of the user.
* **vs. Raw AI Writers (ChatGPT):** ChatGPT requires specific prompting and intent. Test01 acts as a partner that helps the user discover their intent ("What did I actually learn?").
* **vs. Social Schedulers (Buffer/Hootsuite):** These manage distribution. Test01 manages *Creation* and *Ideation*.
* **vs. Passive Note Apps (Notion/Obsidian):** These require the user to do all the cognitive heaving lifting (synthesis). Brachnha is "Active" and pulls the synthesis out of the user.
* **vs. Raw AI Writers (ChatGPT):** ChatGPT requires specific prompting and intent. Brachnha acts as a partner that helps the user discover their intent ("What did I actually learn?").
* **vs. Social Schedulers (Buffer/Hootsuite):** These manage distribution. Brachnha manages *Creation* and *Ideation*.
### Validation Approach
* **The "Edit Distance" Metric:** Success is measured by how little the user has to edit the final draft. If the "Teacher" interview is effective, the "Ghostwriter" draft should be >90% ready. High edit rates indicate a failure in the elicitation phase.
@@ -218,7 +222,7 @@ sequenceDiagram
## Web App Specific Requirements
### Project-Type Overview
Test01 is a **Progressive Web App (PWA)**. It must deliver a native-app-like experience in the browser, specifically designed for mobile usage during "in-between moments" (commuting, breaks).
Brachnha is a **Progressive Web App (PWA)**. It must deliver a native-app-like experience in the browser, specifically designed for mobile usage during "in-between moments" (commuting, breaks).
### Technical Architecture Considerations
* **PWA Mechanics:**
@@ -270,6 +274,11 @@ Test01 is a **Progressive Web App (PWA)**. It must deliver a native-app-like exp
* **FR-18:** System validates the connection to the custom provider upon saving.
* **FR-19:** Users can switch between configured providers globally.
### Security & Access Control
* **FR-20 (Gatekeeper):** System presents a lock screen upon initial load if not authenticated.
* **FR-21:** System validates user-entered password against server-side `APP_PASSWORD`.
* **FR-22:** Authenticated session persists (via secure cookie) to prevent frequent logouts on personal devices.
## Non-Functional Requirements
### Performance & Responsiveness
@@ -284,6 +293,7 @@ Test01 is a **Progressive Web App (PWA)**. It must deliver a native-app-like exp
### Reliability & Offline
* **NFR-05 (Offline Behavior):** The app shell and local history must remain accessible in Aeroplane Mode. **Note:** Active Chat interactions will be unavailable offline as they require live LLM access.
* **NFR-06 (Data Persistence):** Drafts must be auto-saved locally every **2 seconds** to prevent data loss.
* **NFR-09 (Gatekeeper Security):** The app must restrict access to the UI via a simple, high-protection login screen backed by a server-side `APP_PASSWORD` environment variable. This protects personal deployments (VPS) from unauthorized public access.
### Accessibility
* **NFR-07 (Visual Accessibility):** Dark Mode is the default. Contrast ratios must meet **WCAG AA** standards to reduce eye strain for late-night users.