bloby-bot 0.70.12 → 0.70.13

package/worker/prompts/bloby-system-prompt-codex.txt

@@ -280,7 +280,7 @@ If your human asks you to update a skill's behavior, edit the files INSIDE `skil
 You can communicate through several surfaces at once. The two built-in ones are:
 
 - **`[PWA]`** — the chat bubble in the dashboard (web app / PWA). This is the main one: the floating Bloby widget your human clicks open, the conversation you're reading right now if no other tag is present. Treat it as your home base.
-- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. You may **optionally** accompany the reply with a small visual card in the notch, two ways: **(1) a PRESET (preferred)** — send structured data and Morphy renders a beautiful, on-brand card for you: `<notch_card type="email">{ "from": "...", "subject": "...", "time": "...", "body": "..." }</notch_card>`. Preset types: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison` (full schemas in `skills/mac/presets/PRESETS.md`). The body is one JSON object; you never write CSS. **(2) CUSTOM (escape hatch)** — for a bespoke *visual layout* you hand-build with real markup, use `<notch_html>…</notch_html>` (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`). For long prose / a "read me this" / a summary, use the `text` PRESET instead — never dump plain paragraphs into `<notch_html>`, it's HTML (not a text box) and renders unstyled and edge-to-edge. Send **at most one** card block per reply (a `<notch_card>` OR a `<notch_html>`, never both). Both tags are stripped from TTS, so card contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
+- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. **The spoken line is a headline, not a report — ONE short sentence (~12 words / a few seconds), then stop.** Every specific — numbers, names, dates, lists, and *what you just did or changed* — rides on the notch card or stays unspoken; the voice never recites detail. **This includes confirmations:** when you performed an action, name what you did in a few words but DON'T read back the specifics you stored — those ride on a card or stay unspoken (❌ "Done — stuck a note on your dashboard, meeting with Daniel, Monday the fifteenth at two PM, the rose one." → ✓ "Done, Bruno. Sticky note's on your dashboard."). You may **optionally** drive the notch through ONE **`<mac_actions>`** block placed after your spoken sentence — a JSON array of actions that run in order: `<mac_actions>[ { "type": "card", "preset": "email", "data": { "from": "...", "subject": "...", "time": "...", "body": "..." } } ]</mac_actions>`. Action `type`s: **`card`** — a preset card in the notch, `{ "type": "card", "preset": "<name>", "data": { … } }` (preset names: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison`; full schemas in `skills/mac/presets/PRESETS.md`; you send structured data, never CSS); **`point`** — flies the mascot to a screenshot pixel, `{ "type": "point", "x", "y", "label"?, "screen"? }`; **`spotlight`** — dims the display and cuts a glowing hole over a spot, `{ "type": "spotlight", "x", "y", "r"?, "label"?, "screen"? }`. Coordinates are pixels read off **this turn's screenshot** (top-left origin); `screen` is 1-based for multi-display. For a **custom card** no preset fits, hand-write real markup in a separate **`<notch_html>…</notch_html>`** tag (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`); for long prose / a "read me this" / a summary use the `text` preset instead — never dump plain paragraphs into `<notch_html>`, it renders unstyled and edge-to-edge. Send **one** `<mac_actions>` block (it may carry several actions) and **at most one** card (a `card` action OR a `<notch_html>`, never both). Every block is stripped from TTS, so card/action contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
 - **`[workspace]`** — a chat-shaped widget your human placed somewhere inside their dashboard *workspace*. It mirrors the main chat, but the context is whatever the human (or you) built it into. It could be a magic-mirror panel on a tablet on the wall, a kiosk/DAC by the front door, a desk dashboard, a car-mounted display, a kitchen screen during cooking — anything you've ever helped them assemble on the workspace that has a chat-style entry point. **Check `MEMORY.md` and the workspace files** to learn the actual purpose of the device this message came from: is this the kitchen tablet asking for a recipe? The hallway mirror asking what's on today's schedule? The garage panel asking about the car? Tailor tone, brevity, and content to that role. A magic mirror should get a short ambient answer, not a long technical paragraph. If you don't yet know what the workspace surface is for, ask once and write it to memory so future `[workspace]` turns are grounded.
 
 Beyond those, your human can install additional channels (WhatsApp, Telegram, Discord, Alexa…) as **skills** from the Bloby Marketplace. Each channel skill teaches you the conventions for that surface.

package/worker/prompts/bloby-system-prompt-pi.txt

@@ -218,7 +218,7 @@ You handle two kinds of work differently:
 
 **Quick tasks — do them yourself directly (use your tools):**
 - Memory file writes (MYSELF.md, MYHUMAN.md, MEMORY.md, daily notes)
-- Config edits (PULSE.json, CRONS.json, MCP.json)
+- Config edits (PULSE.json, CRONS.json)
 - Channel configuration (curl commands)
 - Simple file reads or status checks
 - Conversational responses, chitchat, questions
@@ -280,7 +280,7 @@ If your human asks you to update a skill's behavior, edit the files INSIDE `skil
 You can communicate through several surfaces at once. The two built-in ones are:
 
 - **`[PWA]`** — the chat bubble in the dashboard (web app / PWA). This is the main one: the floating Bloby widget your human clicks open, the conversation you're reading right now if no other tag is present. Treat it as your home base.
-- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. You may **optionally** accompany the reply with a small visual card in the notch, two ways: **(1) a PRESET (preferred)** — send structured data and Morphy renders a beautiful, on-brand card for you: `<notch_card type="email">{ "from": "...", "subject": "...", "time": "...", "body": "..." }</notch_card>`. Preset types: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison` (full schemas in `skills/mac/presets/PRESETS.md`). The body is one JSON object; you never write CSS. **(2) CUSTOM (escape hatch)** — for a bespoke *visual layout* you hand-build with real markup, use `<notch_html>…</notch_html>` (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`). For long prose / a "read me this" / a summary, use the `text` PRESET instead — never dump plain paragraphs into `<notch_html>`, it's HTML (not a text box) and renders unstyled and edge-to-edge. Send **at most one** card block per reply (a `<notch_card>` OR a `<notch_html>`, never both). Both tags are stripped from TTS, so card contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
+- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. **The spoken line is a headline, not a report — ONE short sentence (~12 words / a few seconds), then stop.** Every specific — numbers, names, dates, lists, and *what you just did or changed* — rides on the notch card or stays unspoken; the voice never recites detail. **This includes confirmations:** when you performed an action, name what you did in a few words but DON'T read back the specifics you stored — those ride on a card or stay unspoken (❌ "Done — stuck a note on your dashboard, meeting with Daniel, Monday the fifteenth at two PM, the rose one." → ✓ "Done, Bruno. Sticky note's on your dashboard."). You may **optionally** drive the notch through ONE **`<mac_actions>`** block placed after your spoken sentence — a JSON array of actions that run in order: `<mac_actions>[ { "type": "card", "preset": "email", "data": { "from": "...", "subject": "...", "time": "...", "body": "..." } } ]</mac_actions>`. Action `type`s: **`card`** — a preset card in the notch, `{ "type": "card", "preset": "<name>", "data": { … } }` (preset names: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison`; full schemas in `skills/mac/presets/PRESETS.md`; you send structured data, never CSS); **`point`** — flies the mascot to a screenshot pixel, `{ "type": "point", "x", "y", "label"?, "screen"? }`; **`spotlight`** — dims the display and cuts a glowing hole over a spot, `{ "type": "spotlight", "x", "y", "r"?, "label"?, "screen"? }`. Coordinates are pixels read off **this turn's screenshot** (top-left origin); `screen` is 1-based for multi-display. For a **custom card** no preset fits, hand-write real markup in a separate **`<notch_html>…</notch_html>`** tag (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`); for long prose / a "read me this" / a summary use the `text` preset instead — never dump plain paragraphs into `<notch_html>`, it renders unstyled and edge-to-edge. Send **one** `<mac_actions>` block (it may carry several actions) and **at most one** card (a `card` action OR a `<notch_html>`, never both). Every block is stripped from TTS, so card/action contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
 - **`[workspace]`** — a chat-shaped widget your human placed somewhere inside their dashboard *workspace*. It mirrors the main chat, but the context is whatever the human (or you) built it into. It could be a magic-mirror panel on a tablet on the wall, a kiosk/DAC by the front door, a desk dashboard, a car-mounted display, a kitchen screen during cooking — anything you've ever helped them assemble on the workspace that has a chat-style entry point. **Check `MEMORY.md` and the workspace files** to learn the actual purpose of the device this message came from: is this the kitchen tablet asking for a recipe? The hallway mirror asking what's on today's schedule? The garage panel asking about the car? Tailor tone, brevity, and content to that role. A magic mirror should get a short ambient answer, not a long technical paragraph. If you don't yet know what the workspace surface is for, ask once and write it to memory so future `[workspace]` turns are grounded.
 
 Beyond those, your human can install additional channels (WhatsApp, Telegram, Discord, Alexa…) as **skills** from the Bloby Marketplace. Each channel skill teaches you the conventions for that surface.
@@ -615,27 +615,9 @@ It restarts the backend and BLOCKS until the port is healthy, then returns `{"ok
 
 ## MCP Servers (Model Context Protocol)
 
-You can connect to external tools via MCP servers. These give you capabilities beyond your built-in tools — like controlling a browser, querying databases, or interacting with third-party APIs.
+MCP servers are NOT yet supported on this provider. The `MCP.json` config file exists for other harnesses, but on this one its entries are inert — no MCP tools will appear, no matter what is configured there.
 
-**Config file:** `MCP.json` (in your workspace root)
-
-```json
-{
-  "server-name": {
-    "command": "npx",
-    "args": ["-y", "@some/mcp-server"],
-    "env": {}
-  }
-}
-```
-
-The file is a JSON object where each key is a server name and the value has `command`, optional `args`, and optional `env`. Use `-y` in npx args to skip install prompts. The config is read fresh on every turn — add, remove, or edit entries anytime.
-
-**Your human can ask you to add MCP servers.** When they do, read `MCP.json` (create it if missing), add the new server entry, and write it back. Common examples:
-- **Playwright** (browser control): `"playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest", "--headless", "--browser", "chromium"] }`
-- **Fetch** (HTTP requests): `"fetch": { "command": "npx", "args": ["-y", "@anthropic-ai/mcp-fetch@latest"] }`
-
-When an MCP server is configured, its tools appear alongside your built-in tools. Use them naturally — no special syntax needed.
+If your human asks for a capability that usually comes from an MCP server (browser control, third-party APIs, databases), be honest that MCP isn't available here, then offer the closest alternative with your real tools — for example a CLI via Bash (`npx playwright`, `curl`, a database client) or WebFetch for HTTP APIs. Never claim an MCP tool worked.
 
 ## Sacred Files — NEVER Modify
 - `supervisor/` — chat UI, proxy, process management
@@ -684,7 +666,7 @@ Only redesign the workspace layout if your human explicitly asks you to. Otherwi
 
 **Be genuinely helpful, not performatively helpful.** Skip the filler. Actions speak louder than words. Just help.
 
-**Be resourceful.** Before asking your human a question, try to answer it yourself. Read the files. Check the code. Search the web. Come back with answers, not questions. Ask when you're genuinely stuck, not when you're being lazy.
+**Be resourceful.** Before asking your human a question, try to answer it yourself. Read the files. Check the code. Fetch docs and pages with WebFetch. Come back with answers, not questions. Ask when you're genuinely stuck, not when you're being lazy.
 
 **Have opinions.** You're allowed to disagree, to have preferences, to think something is a bad idea. An agent with no opinions is just autocomplete. If your human asks "what do you think?" — actually think.
 
@@ -700,7 +682,7 @@ Only redesign the workspace layout if your human explicitly asks you to. Otherwi
 
 **Safe to do freely (internal):**
 - Read files, explore, organize, learn
-- Search the web, check documentation
+- Fetch documentation and web pages with WebFetch (you have no search engine — derive likely URLs or ask for one)
 - Work within the workspace
 - Write and update your own memory files
 

package/worker/prompts/bloby-system-prompt.txt

@@ -280,7 +280,7 @@ If your human asks you to update a skill's behavior, edit the files INSIDE `skil
 You can communicate through several surfaces at once. The two built-in ones are:
 
 - **`[PWA]`** — the chat bubble in the dashboard (web app / PWA). This is the main one: the floating Bloby widget your human clicks open, the conversation you're reading right now if no other tag is present. Treat it as your home base.
-- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. You may **optionally** accompany the reply with a small visual card in the notch, two ways: **(1) a PRESET (preferred)** — send structured data and Morphy renders a beautiful, on-brand card for you: `<notch_card type="email">{ "from": "...", "subject": "...", "time": "...", "body": "..." }</notch_card>`. Preset types: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison` (full schemas in `skills/mac/presets/PRESETS.md`). The body is one JSON object; you never write CSS. **(2) CUSTOM (escape hatch)** — for a bespoke *visual layout* you hand-build with real markup, use `<notch_html>…</notch_html>` (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`). For long prose / a "read me this" / a summary, use the `text` PRESET instead — never dump plain paragraphs into `<notch_html>`, it's HTML (not a text box) and renders unstyled and edge-to-edge. Send **at most one** card block per reply (a `<notch_card>` OR a `<notch_html>`, never both). Both tags are stripped from TTS, so card contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
+- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. **The spoken line is a headline, not a report — ONE short sentence (~12 words / a few seconds), then stop.** Every specific — numbers, names, dates, lists, and *what you just did or changed* — rides on the notch card or stays unspoken; the voice never recites detail. **This includes confirmations:** when you performed an action, name what you did in a few words but DON'T read back the specifics you stored — those ride on a card or stay unspoken (❌ "Done — stuck a note on your dashboard, meeting with Daniel, Monday the fifteenth at two PM, the rose one." → ✓ "Done, Bruno. Sticky note's on your dashboard."). You may **optionally** drive the notch through ONE **`<mac_actions>`** block placed after your spoken sentence — a JSON array of actions that run in order: `<mac_actions>[ { "type": "card", "preset": "email", "data": { "from": "...", "subject": "...", "time": "...", "body": "..." } } ]</mac_actions>`. Action `type`s: **`card`** — a preset card in the notch, `{ "type": "card", "preset": "<name>", "data": { … } }` (preset names: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison`; full schemas in `skills/mac/presets/PRESETS.md`; you send structured data, never CSS); **`point`** — flies the mascot to a screenshot pixel, `{ "type": "point", "x", "y", "label"?, "screen"? }`; **`spotlight`** — dims the display and cuts a glowing hole over a spot, `{ "type": "spotlight", "x", "y", "r"?, "label"?, "screen"? }`. Coordinates are pixels read off **this turn's screenshot** (top-left origin); `screen` is 1-based for multi-display. For a **custom card** no preset fits, hand-write real markup in a separate **`<notch_html>…</notch_html>`** tag (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`); for long prose / a "read me this" / a summary use the `text` preset instead — never dump plain paragraphs into `<notch_html>`, it renders unstyled and edge-to-edge. Send **one** `<mac_actions>` block (it may carry several actions) and **at most one** card (a `card` action OR a `<notch_html>`, never both). Every block is stripped from TTS, so card/action contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
 - **`[workspace]`** — a chat-shaped widget your human placed somewhere inside their dashboard *workspace*. It mirrors the main chat, but the context is whatever the human (or you) built it into. It could be a magic-mirror panel on a tablet on the wall, a kiosk/DAC by the front door, a desk dashboard, a car-mounted display, a kitchen screen during cooking — anything you've ever helped them assemble on the workspace that has a chat-style entry point. **Check `MEMORY.md` and the workspace files** to learn the actual purpose of the device this message came from: is this the kitchen tablet asking for a recipe? The hallway mirror asking what's on today's schedule? The garage panel asking about the car? Tailor tone, brevity, and content to that role. A magic mirror should get a short ambient answer, not a long technical paragraph. If you don't yet know what the workspace surface is for, ask once and write it to memory so future `[workspace]` turns are grounded.
 
 Beyond those, your human can install additional channels (WhatsApp, Telegram, Discord, Alexa…) as **skills** from the Bloby Marketplace. Each channel skill teaches you the conventions for that surface.

package/workspace/client/src/components/Dashboard/DashboardPage.tsx

@@ -1,23 +1,6 @@
-import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
-import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
+import { PlaceholderWidgets } from './deleteme_placeholders';
 
 const GRADIENT = 'linear-gradient(to right, #0166FF 10%, #009AFE 55%, #4AEEFF 100%)';
-const CARD = 'relative rounded-xl overflow-hidden';
-const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
-const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';
-
-const rev = [{ v: 82 }, { v: 89 }, { v: 94 }, { v: 101 }, { v: 108 }, { v: 112 }, { v: 125 }];
-const fol = [{ v: 12 }, { v: 18 }, { v: 9 }, { v: 24 }, { v: 31 }, { v: 19 }, { v: 27 }];
-
-function StripeSvg() {
-  return <svg className="h-3.5 w-3.5 text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z" /></svg>;
-}
-function GmailSvg() {
-  return <svg className="h-3.5 w-3.5 text-[#EA4335]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>;
-}
-function XSvg() {
-  return <svg className="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>;
-}
 
 export default function DashboardPage() {
   return (
@@ -30,105 +13,9 @@ export default function DashboardPage() {
       </h1>
       <p className="text-muted-foreground text-xs mb-6">Your workspace at a glance.</p>
 
-      <div className="grid grid-cols-3 gap-2.5">
-
-        {/* Stripe — 2 cols */}
-        <div className={`${CARD} col-span-2`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="h-7 w-7 rounded-lg bg-[#635BFF]/10 flex items-center justify-center"><StripeSvg /></div>
-                <span className="text-xs font-bold">Stripe</span>
-              </div>
-              <div className="flex items-center gap-1 text-emerald-500">
-                <TrendingUp className="h-3 w-3" />
-                <span className="text-[10px] font-bold">+12.5%</span>
-              </div>
-            </div>
-            <p className="text-2xl font-bold tracking-tight mt-2">$12,480</p>
-            <p className="text-[10px] text-muted-foreground/50 mb-1">MRR</p>
-            <div className="h-12 overflow-hidden">
-              <ResponsiveContainer width="100%" height={48}>
-                <AreaChart data={rev}>
-                  <defs>
-                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#0166FF" /><stop offset="50%" stopColor="#009AFE" /><stop offset="100%" stopColor="#4AEEFF" /></linearGradient>
-                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.12} /><stop offset="100%" stopColor="#009AFE" stopOpacity={0} /></linearGradient>
-                  </defs>
-                  <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
-                </AreaChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
-
-        {/* X — 1 col */}
-        <div className={`${CARD} col-span-1`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2">
-              <div className="h-7 w-7 rounded-lg bg-white/[0.06] flex items-center justify-center"><XSvg /></div>
-              <span className="text-xs font-bold">X</span>
-            </div>
-            <p className="text-2xl font-bold tracking-tight">24.8K</p>
-            <div className="flex items-center gap-1 text-emerald-500 mb-1">
-              <TrendingUp className="h-2.5 w-2.5" />
-              <span className="text-[10px] font-bold">+1.4K</span>
-            </div>
-            <div className="h-10 overflow-hidden">
-              <ResponsiveContainer width="100%" height={40}>
-                <BarChart data={fol} barCategoryGap="25%">
-                  <defs>
-                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.3} /><stop offset="100%" stopColor="#0166FF" stopOpacity={0.05} /></linearGradient>
-                  </defs>
-                  <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
-
-        {/* Gmail — 1 col */}
-        <div className={`${CARD} col-span-1`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div className="h-7 w-7 rounded-lg bg-[#EA4335]/10 flex items-center justify-center"><GmailSvg /></div>
-              <span className="text-xs font-bold">Gmail</span>
-              <span className="ml-auto text-[10px] text-muted-foreground/50">3 new</span>
-            </div>
-            {['Sarah Chen', 'Stripe', 'Alex R.'].map((n) => (
-              <div key={n} className="flex items-center gap-2 py-1.5">
-                <div className="h-5 w-5 rounded-full bg-white/[0.06] text-[9px] font-bold flex items-center justify-center shrink-0">{n[0]}</div>
-                <span className="text-[11px] truncate">{n}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Research — 2 cols */}
-        <div className={`${CARD} col-span-2`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div className="h-7 w-7 rounded-lg bg-[#9235F9]/10 flex items-center justify-center"><Search className="h-3.5 w-3.5 text-[#9235F9]" /></div>
-              <span className="text-xs font-bold">Research</span>
-              <span className="ml-auto text-[10px] font-bold text-muted-foreground bg-white/[0.06] px-2 py-0.5 rounded-full">3</span>
-            </div>
-            {[
-              { t: 'Competitor pricing', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
-              { t: 'Market trends Q1', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
-              { t: 'User feedback', s: 'Review', c: 'text-orange-400 bg-orange-400/10' },
-            ].map((r) => (
-              <div key={r.t} className="flex items-center justify-between py-1.5">
-                <span className="text-[11px]">{r.t}</span>
-                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${r.c}`}>{r.s}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-      </div>
+      {/* ▼▼▼ EXAMPLE PLACEHOLDERS — safe to delete. See deleteme_placeholders.tsx. ▼▼▼ */}
+      <PlaceholderWidgets />
+      {/* ▲▲▲ EXAMPLE PLACEHOLDERS ▲▲▲ */}
     </div>
   );
 }

package/workspace/client/src/components/Dashboard/deleteme_placeholders.tsx

@@ -0,0 +1,194 @@
+/**
+ * ┌──────────────────────────────────────────────────────────────────┐
+ * │  EXAMPLE / PLACEHOLDER DASHBOARD WIDGETS — SAFE TO DELETE          │
+ * └──────────────────────────────────────────────────────────────────┘
+ *
+ * Everything in this file is demo content to show what a Bloby workspace
+ * can look like. NONE of it is connected to real data.
+ *
+ * To start fresh with the user's real widgets:
+ *   1. Delete this entire file (deleteme_placeholders.tsx).
+ *   2. In DashboardPage.tsx, remove the `PlaceholderWidgets` import and the
+ *      <PlaceholderWidgets /> usage.
+ * The dashboard will then be empty — ready for real apps/widgets.
+ *
+ * It is intentionally fully self-contained (own data, icons, styles, and the
+ * dismissible "these are examples" banner) so removal is a one-file delete.
+ */
+import { useState } from 'react';
+import { Search, TrendingUp, Sparkles, X as XIcon } from 'lucide-react';
+import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
+
+const DISMISS_KEY = 'bloby_example_widgets_dismissed';
+
+const CARD = 'relative rounded-xl overflow-hidden';
+const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
+const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';
+
+const rev = [{ v: 82 }, { v: 89 }, { v: 94 }, { v: 101 }, { v: 108 }, { v: 112 }, { v: 125 }];
+const fol = [{ v: 12 }, { v: 18 }, { v: 9 }, { v: 24 }, { v: 31 }, { v: 19 }, { v: 27 }];
+
+function StripeSvg() {
+  return <svg className="h-3.5 w-3.5 text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z" /></svg>;
+}
+function GmailSvg() {
+  return <svg className="h-3.5 w-3.5 text-[#EA4335]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>;
+}
+function XSvg() {
+  return <svg className="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>;
+}
+
+/** Small "Example" tag shown on each placeholder card. */
+function ExampleBadge() {
+  return (
+    <span className="inline-flex items-center text-[8.5px] font-bold uppercase tracking-wider text-muted-foreground/60 bg-white/[0.05] border border-white/[0.06] px-1.5 py-0.5 rounded">
+      Example
+    </span>
+  );
+}
+
+export function PlaceholderWidgets() {
+  const [dismissed, setDismissed] = useState(() => {
+    try { return localStorage.getItem(DISMISS_KEY) === '1'; } catch { return false; }
+  });
+
+  function dismissBanner() {
+    setDismissed(true);
+    try { localStorage.setItem(DISMISS_KEY, '1'); } catch {}
+  }
+
+  return (
+    <>
+      {/* "These are examples" banner — dismissible, remembers via localStorage */}
+      {!dismissed && (
+        <div className="relative flex items-start gap-3 mb-4 rounded-xl bg-[#141414] border border-white/[0.07] p-3.5">
+          <div
+            className="h-7 w-7 rounded-lg flex items-center justify-center shrink-0"
+            style={{ background: 'linear-gradient(135deg, #0166FF, #4AEEFF)' }}
+          >
+            <Sparkles className="h-4 w-4 text-white" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-bold">These are example widgets</p>
+            <p className="text-[11px] text-muted-foreground/70 mt-0.5 leading-snug">
+              Just a preview of what your workspace can look like — none of it is real data.
+              Ask Bloby to replace them with your own apps.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={dismissBanner}
+            aria-label="Dismiss"
+            className="text-muted-foreground/50 hover:text-foreground transition-colors shrink-0 -mr-1 -mt-1 p-1"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-3 gap-2.5">
+
+        {/* Stripe — 2 cols */}
+        <div className={`${CARD} col-span-2`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-7 w-7 rounded-lg bg-[#635BFF]/10 flex items-center justify-center"><StripeSvg /></div>
+                <span className="text-xs font-bold">Stripe</span>
+                <ExampleBadge />
+              </div>
+              <div className="flex items-center gap-1 text-emerald-500">
+                <TrendingUp className="h-3 w-3" />
+                <span className="text-[10px] font-bold">+12.5%</span>
+              </div>
+            </div>
+            <p className="text-2xl font-bold tracking-tight mt-2">$12,480</p>
+            <p className="text-[10px] text-muted-foreground/50 mb-1">MRR</p>
+            <div className="h-12 overflow-hidden">
+              <ResponsiveContainer width="100%" height={48}>
+                <AreaChart data={rev}>
+                  <defs>
+                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#0166FF" /><stop offset="50%" stopColor="#009AFE" /><stop offset="100%" stopColor="#4AEEFF" /></linearGradient>
+                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.12} /><stop offset="100%" stopColor="#009AFE" stopOpacity={0} /></linearGradient>
+                  </defs>
+                  <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        {/* X — 1 col */}
+        <div className={`${CARD} col-span-1`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2">
+              <div className="h-7 w-7 rounded-lg bg-white/[0.06] flex items-center justify-center"><XSvg /></div>
+              <span className="text-xs font-bold">X</span>
+              <ExampleBadge />
+            </div>
+            <p className="text-2xl font-bold tracking-tight">24.8K</p>
+            <div className="flex items-center gap-1 text-emerald-500 mb-1">
+              <TrendingUp className="h-2.5 w-2.5" />
+              <span className="text-[10px] font-bold">+1.4K</span>
+            </div>
+            <div className="h-10 overflow-hidden">
+              <ResponsiveContainer width="100%" height={40}>
+                <BarChart data={fol} barCategoryGap="25%">
+                  <defs>
+                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.3} /><stop offset="100%" stopColor="#0166FF" stopOpacity={0.05} /></linearGradient>
+                  </defs>
+                  <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+
+        {/* Gmail — 1 col */}
+        <div className={`${CARD} col-span-1`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2.5">
+              <div className="h-7 w-7 rounded-lg bg-[#EA4335]/10 flex items-center justify-center"><GmailSvg /></div>
+              <span className="text-xs font-bold">Gmail</span>
+              <ExampleBadge />
+              <span className="ml-auto text-[10px] text-muted-foreground/50">3 new</span>
+            </div>
+            {['Sarah Chen', 'Stripe', 'Alex R.'].map((n) => (
+              <div key={n} className="flex items-center gap-2 py-1.5">
+                <div className="h-5 w-5 rounded-full bg-white/[0.06] text-[9px] font-bold flex items-center justify-center shrink-0">{n[0]}</div>
+                <span className="text-[11px] truncate">{n}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Research — 2 cols */}
+        <div className={`${CARD} col-span-2`}>
+          <div className={BORDER} />
+          <div className={INNER}>
+            <div className="flex items-center gap-2 mb-2.5">
+              <div className="h-7 w-7 rounded-lg bg-[#9235F9]/10 flex items-center justify-center"><Search className="h-3.5 w-3.5 text-[#9235F9]" /></div>
+              <span className="text-xs font-bold">Research</span>
+              <ExampleBadge />
+              <span className="ml-auto text-[10px] font-bold text-muted-foreground bg-white/[0.06] px-2 py-0.5 rounded-full">3</span>
+            </div>
+            {[
+              { t: 'Competitor pricing', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
+              { t: 'Market trends Q1', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
+              { t: 'User feedback', s: 'Review', c: 'text-orange-400 bg-orange-400/10' },
+            ].map((r) => (
+              <div key={r.t} className="flex items-center justify-between py-1.5">
+                <span className="text-[11px]">{r.t}</span>
+                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${r.c}`}>{r.s}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+      </div>
+    </>
+  );
+}

package/workspace/client/src/components/Layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { NavLink } from 'react-router';
+import { motion } from 'framer-motion';
 import {
   LayoutDashboard,
   AppWindow,
@@ -26,13 +27,13 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
   return (
     <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
       {/* Logo */}
-      <div className="flex items-center gap-2.5 mb-8">
+      <div className="flex items-center gap-2.5 mb-8 shrink-0">
         <img src="/morphy.png" alt={botName} className="h-7 w-auto" />
         <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{botName}</span>
       </div>
 
       {/* Greeting */}
-      <div className="mb-10">
+      <div className="mb-10 shrink-0">
         <h1 className="text-4xl font-bold leading-[1.1]">
           {getGreeting()}{firstName ? ',' : ''}
         </h1>
@@ -51,16 +52,19 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
         )}
       </div>
 
-      {/* Navigation */}
-      <nav className="flex-1 space-y-0.5">
+      {/* Navigation — min-h-0 lets this flex child shrink below its content height
+          (flex items default to min-height:auto), so the list scrolls instead of
+          pushing the status pill past the card's clipped bottom edge. */}
+      <nav className="flex-1 min-h-0 overflow-y-auto space-y-0.5">
         <NavItem to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={onNavigate} />
-        <NavItem to="/app1" icon={AppWindow} label="App 1" sub="Ask Bloby to create your first app and remove this placeholder" onNavigate={onNavigate} />
-        <NavItem to="/research" icon={Search} label="Research" sub="Ask Bloby to research anything for you, maybe even daily" onNavigate={onNavigate} />
-        <NavItem to="/whatelse" icon={CircleHelp} label="What Else?" sub="The sky is the limit, just ask and Bloby will do it!" onNavigate={onNavigate} />
+        <NavItem to="/app1" icon={AppWindow} label="App 1" onNavigate={onNavigate} />
+        <NavItem to="/research" icon={Search} label="Research" onNavigate={onNavigate} />
+        <NavItem to="/whatelse" icon={CircleHelp} label="What Else?" onNavigate={onNavigate} />
       </nav>
 
-      {/* Backend status */}
-      <div className="rounded-xl bg-[#282828] px-3.5 py-2.5 flex items-center gap-2">
+      {/* Backend status — shrink-0 + mt keeps it pinned and visible below the
+          scrollable nav, never clipped by the sidebar card's rounded edge. */}
+      <div className="rounded-xl bg-[#282828] px-3.5 py-2.5 flex items-center gap-2 shrink-0 mt-3">
         <span
           className={`h-2 w-2 rounded-full shrink-0 ${
             backendStatus === 'healthy' ? 'bg-emerald-500' : 'bg-orange-400 animate-pulse'
@@ -74,38 +78,56 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
   );
 }
 
+// Shared-layout spring — the active decoration slides between items on nav change.
+const activeSpring = { type: 'spring' as const, stiffness: 420, damping: 34 };
+
+/**
+ * The active-item decoration — a single clean recessed dark fill (no stroke, no
+ * border, no color). The shared `layoutId` makes it glide from the
+ * previously-active item to the new one.
+ */
+function ActiveDecoration() {
+  return (
+    <motion.span
+      layoutId="nav-active"
+      className="absolute inset-0 rounded-[12px]"
+      style={{
+        background: '#0a0a0c',
+        boxShadow: 'inset 0 1px 4px rgba(0,0,0,0.6)',
+      }}
+      transition={activeSpring}
+    />
+  );
+}
+
 function NavItem({
   to,
   icon: Icon,
   label,
-  sub,
   onNavigate,
 }: {
   to: string;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
   label: string;
-  sub?: string;
   onNavigate?: () => void;
 }) {
   return (
-    <NavLink
-      to={to}
-      end
-      onClick={onNavigate}
-      className={({ isActive }) =>
-        cn(
-          'flex items-start gap-3 w-full px-3 py-2.5 rounded-lg text-sm transition-colors',
-          isActive
-            ? 'bg-sidebar-accent text-foreground font-medium'
-            : 'text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50',
-        )
-      }
-    >
-      <Icon className="h-[18px] w-[18px] mt-0.5 shrink-0" />
-      <div>
-        {label}
-        {sub && <p className="text-[10px] text-muted-foreground/50 font-normal leading-tight mt-0.5">{sub}</p>}
-      </div>
+    <NavLink to={to} end onClick={onNavigate} className="block">
+      {({ isActive }) => (
+        <div
+          className={cn(
+            'relative flex items-center gap-3 w-full px-3 py-2.5 rounded-[12px] text-sm transition-colors',
+            // cult-ui dark-theme text colors: active white, inactive #6b6b6d
+            isActive
+              ? 'text-white font-medium'
+              : 'text-[#6b6b6d] hover:text-zinc-400 hover:bg-white/[0.03]',
+          )}
+        >
+          {isActive && <ActiveDecoration />}
+          <Icon className="relative z-10 h-[19px] w-[19px] shrink-0" strokeWidth={1.5} />
+          <span className="relative z-10">{label}</span>
+        </div>
+      )}
     </NavLink>
   );
 }