From b1747480df64843a689f51854e01dbab545a08dc Mon Sep 17 00:00:00 2001 From: dharaneesh-r Date: Fri, 18 Sep 2026 19:27:43 +0530 Subject: [PATCH] docs: CLAUDE.md dock width follows the code to 20vw MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The assistant rules file documented a 70/30 split and `--dai-dock-width: max(340px, 30vw)`. The code now reads `clamp(320px, 20vw, 460px)`, so the doc was describing a layout that no longer exists — and it is an instruction file, so a stale value there gets implemented rather than questioned. Records the three width regimes, the 900px overlay behaviour, that the floor means 1024px renders at 31% and not 20%, and that DOCK_NORMAL in AIPanel.jsx must stay byte-identical or the page jumps on first paint. Also notes in the src/lib/assistant/ copy that it is a duplicate and that its DoormileAI.css is dead — nothing imports it. Co-Authored-By: Claude Opus 5 --- src/components/assistant/CLAUDE.md | 5 ++++- src/lib/assistant/CLAUDE.md | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/assistant/CLAUDE.md b/src/components/assistant/CLAUDE.md index 7e7e883..4df5950 100644 --- a/src/components/assistant/CLAUDE.md +++ b/src/components/assistant/CLAUDE.md @@ -9,7 +9,10 @@ Rules for editing **Doormile AI** — the Operations Copilot (`intents.js`, `Doo An in-console Q&A assistant that answers operator questions about live data — "how many orders today", "morning batch orders", "how many riders are active" — by calling the same API functions every other page in this console already uses. Product name is **MileTruth** (or **Doormile AI**), subtitle **Operations Copilot**. - **Mounted in**: `src/layouts/AdminLayout.jsx` — rendered alongside the page content. - - **70% / 30% Split Layout**: By default on desktop (`window.innerWidth >= 1024`), the assistant is **open on initial load**, occupying 30% of the viewport (`--dai-dock-width: max(340px, 30vw)`), while the page content occupies the remaining 70%. + - **80% / 20% Split Layout**: By default on desktop (`window.innerWidth >= 1024`), the assistant is **open on initial load**, occupying 20% of the viewport (`--dai-dock-width: clamp(320px, 20vw, 460px)`), while the page content occupies the remaining 80%. Narrowed from 30vw on request — that width is what pushed the Deliveries tab strip past its container, so the 10vw goes back to the page. + - `clamp` rather than `max` because the **cap** is what makes a large monitor work: 20vw is 768px at 4K, a chat column wider than most documents. Three regimes — a 320px floor below ~1600px (20vw would be 256px on a 1280 laptop, too narrow for the composer and thread), 20vw between ~1600–2300px, and a 460px cap above that. At 1024px the floor wins, so the panel is 31% there, not 20%. + - At or below 900px the panel is a **full-width overlay with a scrim** and reserves no padding at all. + - `DOCK_NORMAL` in `AIPanel.jsx` must stay **byte-identical** to this value. The CSS applies before the effect that sets the property runs on first paint, so any difference between the two shows as the page jumping sideways on load. - **Visual Separation**: An intentional **24px visible gutter** (`padding-right: calc(var(--dai-dock-width) + 16px)`) separates the page content/tables from the AI card so both surfaces are distinct. - **Smooth Dismissal**: Closing via the header `×` button or navbar toggles `assistantOpen` off, smoothly expanding the page content to 100% full width. State is persisted in `localStorage ('doormileAssistantOpen')`. - **`intents.js`** — all data logic: the intent catalog, keyword/phrase matching, and the API calls that produce answers. The UI never fetches. diff --git a/src/lib/assistant/CLAUDE.md b/src/lib/assistant/CLAUDE.md index 7e7e883..59230eb 100644 --- a/src/lib/assistant/CLAUDE.md +++ b/src/lib/assistant/CLAUDE.md @@ -9,7 +9,11 @@ Rules for editing **Doormile AI** — the Operations Copilot (`intents.js`, `Doo An in-console Q&A assistant that answers operator questions about live data — "how many orders today", "morning batch orders", "how many riders are active" — by calling the same API functions every other page in this console already uses. Product name is **MileTruth** (or **Doormile AI**), subtitle **Operations Copilot**. - **Mounted in**: `src/layouts/AdminLayout.jsx` — rendered alongside the page content. - - **70% / 30% Split Layout**: By default on desktop (`window.innerWidth >= 1024`), the assistant is **open on initial load**, occupying 30% of the viewport (`--dai-dock-width: max(340px, 30vw)`), while the page content occupies the remaining 70%. + - **80% / 20% Split Layout**: By default on desktop (`window.innerWidth >= 1024`), the assistant is **open on initial load**, occupying 20% of the viewport (`--dai-dock-width: clamp(320px, 20vw, 460px)`), while the page content occupies the remaining 80%. Narrowed from 30vw on request — that width is what pushed the Deliveries tab strip past its container, so the 10vw goes back to the page. + - `clamp` rather than `max` because the **cap** is what makes a large monitor work: 20vw is 768px at 4K, a chat column wider than most documents. Three regimes — a 320px floor below ~1600px (20vw would be 256px on a 1280 laptop, too narrow for the composer and thread), 20vw between ~1600–2300px, and a 460px cap above that. At 1024px the floor wins, so the panel is 31% there, not 20%. + - At or below 900px the panel is a **full-width overlay with a scrim** and reserves no padding at all. + - `DOCK_NORMAL` in `AIPanel.jsx` must stay **byte-identical** to this value. The CSS applies before the effect that sets the property runs on first paint, so any difference between the two shows as the page jumping sideways on load. + - **Note:** this file is a duplicate of `src/components/assistant/CLAUDE.md`, and `src/lib/assistant/DoormileAI.css` is a dead copy of the stylesheet — nothing imports it. Only the `src/components/assistant/` copies are live. - **Visual Separation**: An intentional **24px visible gutter** (`padding-right: calc(var(--dai-dock-width) + 16px)`) separates the page content/tables from the AI card so both surfaces are distinct. - **Smooth Dismissal**: Closing via the header `×` button or navbar toggles `assistantOpen` off, smoothly expanding the page content to 100% full width. State is persisted in `localStorage ('doormileAssistantOpen')`. - **`intents.js`** — all data logic: the intent catalog, keyword/phrase matching, and the API calls that produce answers. The UI never fetches.