change icons and docs

Author: hate

README.md

@@ -1,112 +1,144 @@
-# 🧠 DevKeys
-
-> **Type faster. Code smarter.** DevKeys is a privacy-first typing trainer for developers, built with React + Vite, Tailwind, highlight.js syntax colours, and a Rust-to-WASM scoring engine (the WASM bundle is required for the app to run).
-
-## 🧭 Project Map
-- `apps/web/` — React frontend with Zustand state, Tailwind styling, highlight.js-driven syntax tokens, and modular UI components (`MenuBar`, `ProjectHeader`, `EditorSurface`, `BackgroundGrid`, …).
-- `crates/engine/` — Rust crate that exposes the diff/scoring function via `wasm-bindgen`. Build it with `pnpm build:wasm` (wasm-pack) to emit the JavaScript loader + `.wasm` artifacts under `apps/web/src/wasm/` (required at runtime).
-- `docs/` — Product vision, architecture notes, roadmaps, testing guides, and contribution instructions.
-- `TODO.md` — Working engineering checklist mapped to the MVP milestones.
-
-## 📌 Current Snapshot
-**Implemented**
-- Algorithms mode with language/prompt switchers, animated metrics (WPM, elapsed time, completion), and per-character feedback.
-- highlight.js-based syntax colouring integrated with the custom `TypingFeedback` renderer.
-- Local session persistence via IndexedDB (accuracy, WPM, elapsed time, prompt metadata, attempt counts).
-- Midday.ai-inspired environment: monochrome grid backdrop, ambient radial blurs, and a lowercase project header.
-- Tab-to-indent assistance that expands leading whitespace in prompts so new lines remain aligned.
-
-**In Progress / Planned**
-- Expanded prompt packs, keyboard layouts, and richer analytics dashboards (streaks, export).
-- Packaging the Rust engine as the default scoring implementation and adding performance telemetry hooks.
-- Adaptive difficulty selection, heatmaps, and optional AI prompt generation as future roadmap items.
-
-## ⚙️ Prerequisites
+<div align="center">
+
+# <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="display: inline-block; vertical-align: middle; margin-right: 8px;"><rect x="2" y="6" width="20" height="12" rx="2" /><text x="12" y="15" text-anchor="middle" font-size="10" fill="currentColor" dominant-baseline="middle">D</text></svg> devkeys
+
+**Type faster. Code smarter.**
+
+A privacy-first typing trainer built for developers who want to sharpen their coding muscle memory.
+
+Born from the need to master a new split keyboard layout while practicing real code—not random text.
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![Built with Rust](https://img.shields.io/badge/rust-wasm-orange.svg)](https://www.rust-lang.org/)
+[![React](https://img.shields.io/badge/react-18+-61dafb.svg)](https://react.dev/)
+
+[Features](#-features) • [Quick Start](#-quick-start) • [Documentation](docs/) • [Contributing](docs/CONTRIBUTING.md)
+
+</div>
+
+---
+
+## ✨ Features
+
+**Practice with Real Code**
+- Type algorithm implementations, syntax patterns, and idiomatic code snippets
+- Built-in prompts for multiple programming languages with syntax highlighting
+- Create and manage custom prompts for your specific learning needs
+
+**Developer-Focused Experience**
+- Tab-to-indent that respects code alignment
+- VS Code-inspired syntax themes (Dark+, Light+, GitHub Dark/Light, Monokai)
+- Desktop-like interface with draggable, resizable windows
+- File-based prompt organization with language switcher
+
+**Live Metrics & Analytics**
+- Real-time WPM, accuracy, and completion tracking
+- Per-session statistics with detailed breakdowns
+- Prompt-specific history to track improvement over time
+- All data stored locally in IndexedDB—nothing leaves your device
+
+**Built for Performance**
+- Rust WASM engine for blazing-fast diff calculation and scoring
+- Smooth animations powered by Framer Motion
+- Responsive UI with Tailwind CSS and minimal dependencies
+
+## 🚀 Quick Start
+
+**Prerequisites**
 - Node.js 20+
 - [pnpm](https://pnpm.io/) 8+
-- Rust toolchain via `rustup` **and** `wasm-pack` (required because the frontend always uses the compiled WASM bundle)  
-  ```bash
-  rustup target add wasm32-unknown-unknown
-  cargo install wasm-pack
-  ```
-
-## 🚀 Getting Started
-Install workspace dependencies:
-```bash
-pnpm install
-```
+- Rust toolchain + [wasm-pack](https://rustwasm.github.io/wasm-pack/)
 
-Compile the Rust scoring engine (this runs automatically before `dev:web`/`build:web`, but you can invoke it directly as needed):
 ```bash
-pnpm build:wasm
+# Install Rust targets (one-time setup)
+rustup target add wasm32-unknown-unknown
+cargo install wasm-pack
 ```
 
-Launch the web app with hot reload + Tailwind JIT:
+**Installation**
+
 ```bash
+# Clone and install dependencies
+git clone https://github.com/yourusername/devkeys.git
+cd devkeys
+pnpm install
+
+# Start the development server
 pnpm dev:web
 ```
 
-Open the printed URL (default <http://localhost:5173>) to begin. The menu bar controls the active language/prompt, and the typing surface renders animated feedback and syntax highlights.
+Open [http://localhost:5173](http://localhost:5173) and start typing!
 
-Prefer running from the package directory?
-```bash
-pnpm --filter @devkeys/web dev
+## 🎯 Usage
+
+- **Start typing** — Focus is automatic; just begin typing the displayed code
+- **Tab** — Auto-complete indentation to match the prompt
+- **Cmd/Ctrl + R** — Restart the current prompt
+- **Cmd/Ctrl + K** — Open the explorer to switch prompts
+- Click the **stats panel** — View detailed metrics and session history
+- **Custom prompts** — Add your own via the explorer sidebar
+
+## 📦 Project Structure
+
+```
+devkeys/
+├── apps/web/          # React + Vite frontend
+│   ├── src/
+│   │   ├── features/  # Editor, stats, session management
+│   │   ├── shared/    # Reusable components & utilities
+│   │   └── wasm/      # Compiled Rust engine (generated)
+├── crates/engine/     # Rust scoring engine
+└── docs/              # Architecture & contribution guides
 ```
 
-## 🧪 Verification & Testing
-Run the full project check (lint → typecheck → build → cargo tests):
+## 🧪 Development
+
 ```bash
+# Run all checks (lint, typecheck, build, tests)
 pnpm verify
-```
 
-Individual commands:
-- `pnpm lint:web`
-- `pnpm typecheck:web`
-- `pnpm build:web`
-- `pnpm --filter @devkeys/web test`
-- `pnpm test:rust`
-
-### 🦀 Rust Engine Workflow
-- Unit test the engine crate:
-  ```bash
-  cargo test -p devkeys_engine
-  ```
-- Build the WASM bundle for the web app (required before running the frontend or building for production):
-  ```bash
-  pnpm build:wasm
-  ```
-  The web client always uses the compiled WASM bundle (`apps/web/src/wasm/`); missing artifacts will surface as startup errors.
-
-## 🏗️ Production Build
-Create an optimized bundle:
-```bash
+# Build WASM engine only
+pnpm build:wasm
+
+# Run Rust tests
+pnpm test:rust
+
+# Production build
 pnpm build:web
 ```
 
-Artifacts live in `apps/web/dist/`. The Rust build writes its loader + `.wasm` assets to `apps/web/src/wasm/`, and Vite bundles them automatically.
-
-## 📊 Session Persistence
-- Completed sessions land in IndexedDB (`devkeys/sessions`) with per-character attempt snapshots, accuracy, WPM, and timestamps.
-- The bottom GitHub link remains purely client-side; no session data leaves the device.
-- Use your browser’s application panel to inspect or clear stored sessions.
-
-## 📦 Working With Prompt Packs
-- Packs live under `apps/web/src/content/packs/`. Update `localPacks.ts` after adding a file so it’s included in the runtime bundle.
-- Each item follows the schema shown in `docs/CONTRIBUTING.md` (id, language, snippet, optional metadata).
-- Restart (or rely on Vite’s HMR) after authoring new packs so the in-memory registry refreshes.
-
-## 🛠️ Troubleshooting
-- **WASM module not found** → Run `pnpm build:wasm` to regenerate the WASM bundle before starting the app or building assets.
-- **Tab doesn’t indent** → Ensure the prompt actually contains leading whitespace; the helper only expands existing indentation.
-- **Syntax colours missing** → highlight.js must know the language; update `lib/syntax.ts` to register new ones.
-- **IndexedDB clutter** → Clear the `devkeys` database through browser devtools or call `indexedDB.deleteDatabase("devkeys")`.
-- **pnpm scripts missing** → Run `pnpm install` at the repo root so workspace scripts are registered.
-
-## 📚 Further Reading
-- Product principles: `docs/01_Overview_Principles.md`
-- Goals & feature breakdown: `docs/02_Goals_Features.md`
-- Updated architecture + syntax pipeline: `docs/03_Syntax_Architecture.md`
-- Testing & CI guidance: `docs/07_Testing_CI.md`
-- Contribution workflow & schema references: `docs/CONTRIBUTING.md`, `docs/GLOSSARY.md`
-
-Questions or ideas? Open an issue or start a discussion—happy typing! ⌨️✨
+## 🛠️ Tech Stack
+
+- **Frontend:** React 18, TypeScript, Tailwind CSS, Zustand, Framer Motion
+- **Syntax:** highlight.js with VS Code theme support
+- **Engine:** Rust compiled to WebAssembly via wasm-bindgen
+- **Storage:** IndexedDB for session persistence
+- **Build:** Vite, pnpm workspaces
+
+## 🔒 Privacy First
+
+- **100% local** — All typing data, sessions, and progress stay on your device
+- **No analytics** — No tracking, cookies, or external requests
+- **Offline-ready** — Works without an internet connection once loaded
+- **Open source** — Audit the code yourself
+
+## 📚 Documentation
+
+- [Product Principles](docs/01_Overview_Principles.md)
+- [Goals & Features](docs/02_Goals_Features.md)
+- [Architecture](docs/03_Syntax_Architecture.md)
+- [Contributing Guide](docs/CONTRIBUTING.md)
+
+## 🤝 Contributing
+
+We welcome contributions! Whether it's new prompt packs, bug fixes, or feature additions, check out our [Contributing Guide](docs/CONTRIBUTING.md) to get started.
+
+## 📄 License
+
+MIT © DevKeys Contributors
+
+---
+
+
+
+

apps/web/index.html

@@ -5,6 +5,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>devkeys</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+  <link rel="apple-touch-icon" href="/favicon.svg" />
 </head>
 
 <body class="bg-slate-950 text-slate-100">