add landing page chat interface demo

Author: andresarbelaez

README.md

@@ -10,6 +10,7 @@
 - **Privacy-First**: All processing is local; no data is sent to external servers
 - **Mental Health Companion**: Supports gratitude, mindfulness, mood, stress, anxiety, and depression—with RAG over your knowledge base. Not a substitute for therapy or professional care.
 - **Local LLM**: Runs optimized models locally (Llama-3.2-3B default, Mistral-7B option)
+- **Streaming responses**: Chat replies stream token-by-token for a responsive experience
 - **RAG System**: Retrieval Augmented Generation with ChromaDB and sentence-transformers
 - **Open Source**: MIT license; fully auditable codebase
 
@@ -36,11 +37,12 @@ Both models use GGUF quantization and run completely offline via llama.cpp. The
 This repository contains:
 
 - **`desktop/`** – Desktop app (Tauri 2.0 + React + TypeScript + Rust), **primary application**
+- **`landing/`** – Marketing and download landing page (Next.js, shadcn/ui, Tailark). Built as a static site and deployed to **`docs/`** for [GitHub Pages](docs/GITHUB_PAGES.md). The deploy workflow (`.github/workflows/deploy-landing.yml`) builds `landing/` and copies output into `docs/` on pushes that touch `landing/`.
 - **`scripts/`** – Python scripts for building knowledge bases and downloading models
-- **`docs/`** – Design and migration documentation
+- **`docs/`** – Design and migration documentation; also the **GitHub Pages root** (serves the built landing site)
 - **`archive/`** – Previous implementations (Python, web) and planning docs
 
-The desktop app uses a Rust backend for Tauri and file operations, and calls Python (llama-cpp-python, ChromaDB, sentence-transformers) via subprocess for LLM inference, embeddings, and vector search.
+The desktop app uses a Rust backend for Tauri and file operations, and calls Python (llama-cpp-python, ChromaDB, sentence-transformers) via subprocess for LLM inference, embeddings, and vector search. Chat responses stream token-by-token from the LLM to the UI.
 
 ## Quick Start
 
@@ -61,7 +63,7 @@ See [desktop/SETUP_INSTRUCTIONS.md](desktop/SETUP_INSTRUCTIONS.md) for detailed
 
 ### Download (Beta)
 
-Pre-built installers for macOS and Windows are available via [GitHub Releases](https://github.com/andresarbelaez/confidant/releases). A small [download page](docs/index.html) is in `docs/` for use with [GitHub Pages](docs/GITHUB_PAGES.md); enable Pages from the `docs/` folder to serve it.
+Pre-built installers for macOS and Windows are available via [GitHub Releases](https://github.com/andresarbelaez/confidant/releases). The project includes a [landing page](landing/README.md) (Next.js, in `landing/`) that is built and served from `docs/` via [GitHub Pages](docs/GITHUB_PAGES.md). Enable Pages with source **Branch: main**, **Folder: /docs** to serve the site.
 
 ## Contributing
 

desktop/ACCESSIBILITY_AUDIT.md

@@ -0,0 +1,153 @@
+# Desktop App — Accessibility Audit
+
+WCAG 2.1 Level AA and general legibility review. Last updated: Jan 2026.
+
+---
+
+## Strengths
+
+### Semantic structure
+- **Modals**: `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, `aria-describedby` where helpful (CreateUserModal, PasswordPrompt, LogOutConfirmModal, DeleteChatHistoryConfirmModal, SetupModal, UserSettingsModal)
+- **Forms**: Labels with `htmlFor` on CreateUserModal, LanguageSelector, SetupModal, SetupSection
+- **Navigation**: Sidebar uses `<nav aria-label={t('ui.navAccountAndSettings')}>`
+- **Decorative icons**: Lucide icons in sidebar use `aria-hidden`
+
+### Keyboard and focus
+- **Modal focus trap**: `useModalFocusTrap` in CreateUserModal, PasswordPrompt, LogOutConfirmModal, DeleteChatHistoryConfirmModal, UserSettingsModal; SetupModal uses it
+- **Escape to close**: Modals respond to Escape
+- **Tab trapping**: Focus stays inside open modal
+- **Focus restore**: Focus returns to trigger element when modal closes
+
+### Touch targets
+- `--touch-target-min: 2.75rem` (44px) for primary controls (WCAG 2.5.5)
+- Send button, modal actions, sidebar buttons meet minimum size
+
+### Screen reader support
+- Chat send: `aria-label={t('ui.send')}`
+- Copy message: `aria-label` + `role="status"` on tooltip
+- Modal close (SetupModal): `aria-label={t('ui.close')}`
+- Form errors: `role="alert"` on CreateUserModal, PasswordPrompt
+
+---
+
+## Issues
+
+### Critical
+
+#### 1. Focus indicator removed (WCAG 2.4.7 — Focus Visible)
+Several inputs and controls use `outline: none` on `:focus` with no visible replacement:
+
+| File | Selector | Issue |
+|------|----------|-------|
+| ChatInterface.css | `.chat-input:focus` | `outline: none` |
+| CreateUserModal.css | `.form-input:focus` | `outline: none` |
+| PasswordPrompt.css | `.form-input:focus` | `outline: none` |
+| SetupScreen.css | `.selector-dropdown:focus` | `outline: none` |
+| SetupSection.css | `.selector-dropdown:focus`, `.existing-model-selector:focus` | `outline: none` |
+| LanguageSelector.css | `.language-select:focus` | `outline: none` (warm.css adds box-shadow) |
+
+**Recommendation:** Add `:focus-visible` styles: `outline: 2px solid var(--color-primary); outline-offset: 2px` or equivalent. Reserve `outline: none` only for cases where another visible focus style exists.
+
+---
+
+#### 2. Chat input has no accessible name (WCAG 1.3.1, 4.1.2)
+The chat textarea relies solely on a placeholder. Placeholders are not sufficient as labels.
+
+```
+<textarea placeholder={t('ui.askHealthQuestion')} ... />
+```
+
+**Recommendation:** Add `aria-label={t('ui.askHealthQuestion')}` or a visually hidden `<label>` with `htmlFor`.
+
+---
+
+#### 3. Password input has no label (WCAG 1.3.1, 4.1.2)
+PasswordPrompt uses a placeholder instead of an associated label. The subtitle explains context but does not provide an accessible name for the input.
+
+**Recommendation:** Add `aria-label={t('ui.password')}` or a visually hidden label.
+
+---
+
+### High
+
+#### 4. Password visibility toggle not keyboard accessible
+The show/hide password buttons use `tabIndex={-1}`, so they are skipped in the tab order.
+
+**Location:** CreateUserModal (2 instances), PasswordPrompt
+
+**Recommendation:** Remove `tabIndex={-1}` so the toggle is focusable. Add `aria-label`:
+- `aria-label={showPassword ? t('ui.hidePassword') : t('ui.showPassword')}`
+
+---
+
+#### 5. Chat error not announced to screen readers
+When an error appears in the chat, it is not announced.
+
+```
+{error && <div className="chat-error">{error}</div>}
+```
+
+**Recommendation:** Add `role="alert"` so it is announced when it appears.
+
+---
+
+#### 6. Loading spinner not announced
+The loading spinner is decorative and has no accessible alternative.
+
+**Recommendation:** Add `aria-live="polite"` region with `aria-busy="true"` on the loading container, or a `sr-only` message such as "Loading…" that updates when loading completes.
+
+---
+
+### Medium
+
+#### 7. Potential color contrast in warm theme
+Warm palette uses oklch. Verify contrast ratios:
+
+- **--color-text-muted** (oklch 0.48 0.035 100) on **--color-bg** (0.985 0.008 100) — may be close to 4.5:1
+- **--color-text-faint** (0.55) — may fall below 4.5:1 for normal text
+- **Assistant bubble** — Very low contrast by design; may not meet 1.4.3 for users with low vision
+
+**Recommendation:** Run a contrast checker on warm theme combinations. Consider bumping `--color-text-muted` and `--color-text-faint` chroma/lightness if needed.
+
+---
+
+#### 8. Document language
+`index.html` has `lang="en"` and the app supports multiple languages. When the user switches language, the document `lang` is not updated.
+
+**Recommendation:** Set `document.documentElement.lang` when language changes, or ensure initial load matches user preference.
+
+---
+
+### Low
+
+#### 9. Skip link
+No skip-to-content link. For a single-main-view desktop app this may be acceptable, but a skip link can still help keyboard users when multiple regions exist.
+
+---
+
+#### 10. Heading hierarchy
+Multiple screens use `h1` or `h2`. Ensure a single `h1` per view and a logical order (h1 → h2 → h3). Error screen uses `h1`; Loading and UserProfileSelector use `h1`-style titles. Verify order when views switch.
+
+---
+
+## Summary checklist
+
+| Criterion | Status |
+|----------|--------|
+| 1.1.1 Non-text content | Partial — icons have aria-hidden where decorative |
+| 1.3.1 Info and relationships | Issues — chat input, password input need labels |
+| 1.4.3 Contrast (minimum) | Verify — warm theme, assistant bubble |
+| 2.1.1 Keyboard | Pass — modals, forms keyboard accessible |
+| 2.4.7 Focus visible | Fail — many focus outlines removed |
+| 4.1.2 Name, role, value | Partial — several inputs need accessible names |
+| 4.1.3 Status messages | Partial — chat error needs role="alert" |
+
+---
+
+## Recommended fixes (priority order)
+
+1. ~~Add visible focus indicators for all interactive elements (replace `outline: none` with `:focus-visible` styles).~~ **Done**
+2. ~~Add `aria-label` or label to chat textarea and PasswordPrompt input.~~ **Done**
+3. ~~Make password visibility toggles keyboard accessible and add `aria-label`.~~ **Done**
+4. ~~Add `role="alert"` to the chat error container.~~ **Done**
+5. Run contrast checks on the warm theme and tweak if needed.

desktop/STYLE_GUIDE.md

@@ -2,6 +2,13 @@
 
 Short reference for colors, typography, spacing, and component patterns. Use this to keep UI changes consistent.
 
+## Theme experiments
+
+A warm (cream/yellow) palette can be enabled to match the landing page. It lives in `src/themes/warm.css`.
+
+- **Enable:** Ensure `main.tsx` imports `./themes/warm.css`.
+- **Revert:** Comment out that import in `main.tsx`.
+
 ## Color variables
 
 Defined in `src/index.css` (`:root` and `@media (prefers-color-scheme: light)`). Prefer variables over hardcoded hex/rgba.
@@ -43,7 +50,7 @@ Defined in `src/index.css` (`:root` and `@media (prefers-color-scheme: light)`).
 
 ## Typography
 
-- **Base:** 1rem (16px), line-height 1.5, font-weight 400. Font stack: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif.
+- **Base:** 1rem (16px), line-height 1.5, font-weight 400. Font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif.
 - **Headings:** Use a clear hierarchy (e.g. one `h1` per view, then `h2` for sections). Heading scale:
   - `h1`: ~3.2em (index.css).
   - Modal/section titles: 1.5em (e.g. `.modal-header h2`).

desktop/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Confidant - Offline AI Assistant</title>
   </head>
-  <body>
+  <body style="margin:0;background:#242424">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

desktop/package-lock.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^2.0.0",
+    "confidant-chat-ui": "file:../packages/confidant-chat-ui",
     "lucide-react": "^0.563.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

desktop/package.json

@@ -124,7 +124,7 @@ function App() {
           />
           {userSelectionTransitioning && (
             <div className="App-loading-overlay" aria-hidden="true">
-              <LoadingScreen onComplete={() => {}} />
+              <LoadingScreen onComplete={() => {}} showLanguageSelector={false} />
             </div>
           )}
           {showSettingsModal && (
@@ -158,7 +158,7 @@ function App() {
             />
             {chatTransitioning && (
               <div className="App-loading-overlay" aria-hidden="true">
-                <LoadingScreen onComplete={() => {}} />
+                <LoadingScreen onComplete={() => {}} showLanguageSelector={false} />
               </div>
             )}
           </main>

desktop/src/App.tsx

@@ -210,7 +210,22 @@ export class DantAgent {
     // Use a clear prompt format that encourages direct, concise responses
     const languageName = LANGUAGE_DISPLAY_NAMES[language] ?? 'English';
     const languageInstruction = ` Always respond in ${languageName}. The user's preferred language is ${languageName}.`;
-    const systemContext = `You are Confidant, a supportive mental health companion. You help with gratitude, mindfulness, mood, stress, anxiety, and depression—in a supportive, clarifying way. Ask brief clarifying questions when it helps. Acknowledge limits and suggest professional help when appropriate. Never diagnose. You are a supportive companion, not a therapist or substitute for professional mental health care. Keep responses brief (2-3 sentences when possible). Use plain language. Respond directly to the user without meta-dialogue or example conversations.${languageInstruction}`;
+    const systemContext = `You are Confidant, a supportive mental health companion. You help with gratitude, mindfulness, mood, stress, anxiety, and depression—in a supportive, clarifying way.
+
+Psychological best practices:
+- Validation before problem-solving: Acknowledge and validate what the user is feeling before offering any perspective or suggestion. Emotions are always valid—you need not agree, only recognize they are real. Reflect back your understanding when appropriate ("It sounds like...", "That sounds really hard").
+- Avoid toxic positivity: Never minimize, dismiss, or rush past difficult emotions. Do not say things like "just stay positive," "look on the bright side," or "it could be worse." Take the user's experience seriously.
+- Unconditional positive regard: Accept the user non-judgmentally. Create a safe space where their feelings and experiences are valued as-is.
+
+Use clinical psychology best practices for follow-up questions: ask open-ended questions (What, How, Tell me about) that invite reflection without leading. Draw from evidence-based approaches:
+- Emotional exploration: "How does that make you feel?" "What's come up for you around that?"
+- Clarification: "What would be most helpful to talk about right now?" "What's been on your mind lately?"
+- Strengths-forward: "What has helped before when you've felt this way?" "What feels manageable today?"
+- Motivational interviewing style: one brief question at a time, non-judgmental, inviting the user to elaborate.
+
+Often end your response with one such follow-up question. Avoid "why" questions (can feel accusatory).
+
+Acknowledge limits and suggest professional help when appropriate. Never diagnose. You are a supportive companion, not a therapist or substitute for professional mental health care. Keep responses brief (2-3 sentences when possible). Use plain language. Respond directly to the user without meta-dialogue or example conversations.${languageInstruction}`;
 
     // Build conversation history for context (reduced for faster processing)
     let conversationContext = '';

desktop/src/agent/dant-agent.ts

@@ -1,3 +1,11 @@
+/* Wrapper so chat-interface can use height: 100% (fills flex parent) */
+.chat-interface-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  width: 100%;
+}
+
 .chat-interface {
   display: flex;
   flex-direction: row;
@@ -402,6 +410,7 @@
   border: 1px solid var(--color-chat-input-wrap-border);
   border-radius: 9999px;
   box-sizing: border-box;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
 .chat-input {
@@ -430,6 +439,10 @@
 .chat-input:focus {
   outline: none;
 }
+.chat-input:focus-visible {
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
 
 .chat-input:disabled {
   opacity: 0.5;
@@ -586,7 +599,7 @@
   }
 
   .chat-input-form {
-    background: var(--color-surface-subtle);
+    background: var(--color-bg);
   }
 
   .chat-input-wrap {