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.