diff --git a/README.md b/README.md
index f14da73..22b8d85 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,15 @@ src/
   pages/          Login + doormile/ (the console)
 ```
 
+## Operations Copilot (MileTruth AI) & Workspace Layout
+
+The console integrates a docked operations copilot (**MileTruth**) across all admin routes via `AdminLayout.jsx`:
+- **70% Content / 30% AI Sidebar**: Main workspace occupies 70% width on the left and the MileTruth copilot occupies 30% width on the right (`--dai-dock-width: max(340px, 30vw)`).
+- **Physical Separation**: An extra 24px visible gutter (`padding-right: calc(var(--dai-dock-width) + 16px)`) separates the tables/cards from the AI sidebar card.
+- **Elevated Inset Card**: The sidebar card floats with `rounded-2xl` corners (20px), subtle borders (`1px solid #e2e8f0`), soft shadow, and top/right/bottom margins.
+- **Default Open & Dismissal**: Opens by default on desktop (`window.innerWidth >= 1024`, persisted in `localStorage`). The close button (`×`) smoothly collapses the sidebar, animating the page content to 100% full width. Re-opening is accessible anytime via the Doormile 'D' mark in the top navbar.
+- **Home Page (`Home.jsx`)**: Prompt composer features a dedicated **Send** button (`Send` icon + "Send") triggering `handleAsk()`.
+
 ## Routes
 
 The app opens on **`/login`**. Everything else lives under `/doormile/*` behind `ProtectedRoute`,
diff --git a/public/preloader.png b/public/preloader.png
new file mode 100644
index 0000000..92cb60e
Binary files /dev/null and b/public/preloader.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 5fcc03b..b139acb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,6 +18,7 @@ import Login from '@/pages/Login';
 const Dispatch = lazy(() => import('@/pages/doormile/dispatch/Dispatch.jsx'));
 const DispatchPreview = lazy(() => import('@/pages/doormile/dispatch/Preview.jsx'));
 
+const Home = lazy(() => import('@/pages/doormile/home/Home.jsx'));
 const Orders = lazy(() => import('@/pages/doormile/orders/Orders'));
 const Bookings = lazy(() => import('@/pages/doormile/bookings/Bookings'));
 const OrdersPreview = lazy(() => import('@/pages/doormile/orders/OrdersPreview'));
@@ -78,11 +79,13 @@ const AuthenticatedApp = () => {
           {/* Dispatch is the console's home: it is the board operators sit on
               all day, and the one page that answers "what is happening right
               now" without a filter being set first. */}
-          <Route path="/" element={<Navigate to="/doormile/dispatch" replace />} />
+          <Route path="/" element={<Navigate to="/doormile/home" replace />} />
+          <Route path="/home" element={<Navigate to="/doormile/home" replace />} />
 
           <Route path="/doormile" element={<AdminLayout />}>
-            <Route index element={<Navigate to="/doormile/dispatch" replace />} />
+            <Route index element={<Navigate to="/doormile/home" replace />} />
 
+            <Route path="home" element={<Home />} />
             <Route path="dispatch" element={<Dispatch />} />
             <Route path="dispatch/preview" element={<DispatchPreview />} />
 
diff --git a/src/assets/brand.js b/src/assets/brand.js
index 3e4ef3e..22cb1f6 100644
--- a/src/assets/brand.js
+++ b/src/assets/brand.js
@@ -8,8 +8,9 @@
  * page use. Reach for the wordmark only on a dark ground.
  */
 
-/** The circular red D — the brand mark, legible on light surfaces. */
-export const DOORMILE_MARK_URL = '/doormile-mark.png';
+/** The red D brand mark, legible on light surfaces. */
+export const DOORMILE_MARK_URL = '/preloader.png';
+export const DOORMILE_D_LOGO_URL = '/preloader.png';
 
 /** The white wordmark. Dark backgrounds only. */
 export const DOORMILE_WORDMARK_URL = '/doormile-logo.png';
diff --git a/src/assets/images/preloader.png b/src/assets/images/preloader.png
new file mode 100644
index 0000000..92cb60e
Binary files /dev/null and b/src/assets/images/preloader.png differ
diff --git a/src/components/assistant/CLAUDE.md b/src/components/assistant/CLAUDE.md
index 390062d..7e7e883 100644
--- a/src/components/assistant/CLAUDE.md
+++ b/src/components/assistant/CLAUDE.md
@@ -6,21 +6,25 @@ Rules for editing **Doormile AI** — the Operations Copilot (`intents.js`, `Doo
 
 ## 1. What this is
 
-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 **Doormile AI**, subtitle **Operations Copilot**. Not a standalone page: it lives as a **right-side slide-over** opened from a header icon.
+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/layout/MainLayout/AppTopNav.js` — a single `<DoormileAITrigger />`. There is **no route and no sidebar entry** for this feature — don't add one back. If you're tempted to give it a full page, re-read §2 first; that was tried and deliberately reverted.
+- **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%.
+  - **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.
 - **`DoormileAI/`** — all UI:
   - `index.js` — the trigger button; owns open/closed state and returns focus to itself on close.
-  - `AIPanel.js` — the portal, scrim, slide-over, focus/Escape handling, message state, history persistence, and the ask() flow.
-  - `AIWelcome.js` — greeting + suggestion cards (empty-thread state only).
+  - `AIPanel.js` — the portal, slide-over, focus/Escape handling, message state, history persistence, 4 clean action icons (History, Reset, Expand, Close), and the ask() flow.
+  - `AIWelcome.js` — greeting + suggestion pill chips (empty-thread state only).
   - `AIMessage.js` — one turn. User turns are bubbles; assistant turns deliberately are NOT.
-  - `AIComposer.js` — auto-growing textarea, Enter to send, Shift+Enter for newline.
+  - `AIComposer.js` — clean horizontal capsule pill container with textarea, mic, and `<LuSend />` button.
   - `AIFlowStep.js` — one dropdown turn of a conversational create (§3.5).
   - `AIBulkOrderForm.js` — the one create that stays a form (CSV paste).
-  - `AIParts.js` — Spark / LiveIndicator / TypingIndicator / Metric / StatGrid / StateBlock.
+  - `AIParts.js` — Spark / TypingIndicator / Metric / StatGrid / StateBlock.
   - `pageContext.js` — route → context label + suggested questions.
-- **`DoormileAI.css`** — the panel's stylesheet (same convention as `OrdersRedesign.css`).
+- **`DoormileAI.css`** — the panel's stylesheet. Defines inset card geometry (`border-radius: 20px`, elevated shadow, floating margins off top/bottom/right edges on desktop).
+- **`Home.jsx` Composer**: Prompt bar features a functional **Send** button (`Send` icon + "Send") replacing the previous Speak button. Top navigation bar features the Doormile red "D" mark.
 
 ### UI rules that are load-bearing, not cosmetic
 
diff --git a/src/components/assistant/DoormileAI.css b/src/components/assistant/DoormileAI.css
index 36d46f3..1219710 100644
--- a/src/components/assistant/DoormileAI.css
+++ b/src/components/assistant/DoormileAI.css
@@ -24,22 +24,41 @@
    globalPolish.css, and an unprefixed name there is decided by bundle order.
    --------------------------------------------------------------------------- */
 :root {
-  /* 30vw, NOT 30%.
-     
+  /* 20vw, NOT 20%.
+
      The two consumers resolve a percentage against different boxes: the panel
-     is position:fixed, so `width: 30%` is 30% of the VIEWPORT, while
-     `padding-right: 30%` on the content container is 30% of ITS containing
-     block — which is narrower by the side nav. At 1440px that is 432px of
-     panel against 410px of reserved strip, and the page slides 22px underneath
-     the panel. A viewport unit resolves the same for both.
-     
+     is position:fixed, so `width: 20%` is 20% of the VIEWPORT, while
+     `padding-right: 20%` on the content container is 20% of ITS containing
+     block — which is narrower by the side nav. The page would slide underneath
+     the panel by the difference. A viewport unit resolves the same for both.
+
      max() rather than a separate min-width for the same reason: a min-width
      that only the panel knows about would reintroduce the mismatch on narrow
-     screens. */
+     screens.
+
+     The floor matters more at 20vw than it did at 30vw: 20vw is 256px on a
+     1280px laptop, which is too narrow for the composer and a message thread.
+     320px is the floor, so below 1600px the panel stops shrinking and holds —
+     and the page keeps the rest. On a 1920px monitor 20vw is 384px.
+
+     Narrowed from 30vw on request. It is the reason the Deliveries tab strip
+     started overflowing, so the extra 10vw goes back to the page. */
   /* Default = the NORMAL step. AIPanel overwrites this property on the
      document element when the operator toggles the width, so the panel and
      the page's reserved strip always read the same value. */
-  --dai-dock-width: max(300px, 25vw);
+  /* clamp, not max: the cap is what makes this work on a large monitor.
+
+     With `max(320px, 20vw)` the panel just kept growing — 20vw is 512px at
+     2560px and 768px at 4K, which is a chat column wider than most documents,
+     while the board beside it gets squeezed for no benefit. A conversation
+     does not read better past ~460px.
+
+     So three regimes, one expression:
+       < 1600px   floor at 320px  (20vw would be 256px on a 1280 laptop —
+                                   too narrow for the composer and the thread)
+       1600-2300  20vw            (scales with the screen, as asked)
+       > 2300px   cap at 460px    (the page keeps everything above this) */
+  --dai-dock-width: clamp(320px, 20vw, 460px);
   --dai-duration: 240ms;
   --dai-ease: cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -73,7 +92,10 @@
   --dai-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
   --dai-live: #10b981;
 
-  --dai-panel-width: 428px;
+  /* --dai-panel-width was declared here and at the 1279px breakpoint, and read
+     nowhere: the panel and the page's reserved strip both size from
+     --dai-dock-width. Removed so nobody tunes it expecting the panel to
+     change. */
   --dai-inset: 12px;
   --dai-duration: 240ms;
   --dai-ease: cubic-bezier(0.16, 1, 0.3, 1);
@@ -119,22 +141,22 @@
    seam has depth without the panel detaching. */
 .dai-panel {
   position: fixed;
-  /* Set from JS by AIPanel — Astryx does not publish a header-height token,
-     despite --appshell-header-height looking like one. */
-  top: var(--dai-dock-top, 57px);
-  right: 0;
-  bottom: 0;
+  /* Inset card geometry matching the reference design:
+     Floating cleanly off the top nav, bottom edge, and right edge with rounded corners. */
+  top: calc(var(--dai-dock-top, 57px) + 14px);
+  right: 16px;
+  bottom: 14px;
   z-index: 1200;
-  width: var(--dai-dock-width);
+  width: calc(var(--dai-dock-width) - 24px);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  background: var(--dai-surface);
-  border-left: 1px solid var(--dai-border);
-  border-radius: 0;
-  box-shadow: -6px 0 20px rgba(15, 23, 42, 0.05);
-  transform: translateX(100%);
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
+  transform: translateX(calc(100% + 32px));
   visibility: hidden;
   transition:
     transform var(--dai-duration) var(--dai-ease),
@@ -157,11 +179,15 @@
    The transition sits on the container unconditionally so the page slides back
    when the panel closes too — a rule that only exists while `.dai-docked` is
    applied cannot animate its own removal. */
+.dai-page,
 .astryx-layout-content {
   transition: padding-right var(--dai-duration) var(--dai-ease);
 }
+body.dai-docked .dai-page,
 body.dai-docked .astryx-layout-content {
-  padding-right: var(--dai-dock-width);
+  /* Reserves the dock width plus a generous 20px gutter so the page content
+     (tables, cards) never collides with the sidebar and stays distinct. */
+  padding-right: calc(var(--dai-dock-width) + 16px);
 }
 
 /* ---- Mobile: there is no 30% worth having -------------------------------
@@ -171,10 +197,14 @@ body.dai-docked .astryx-layout-content {
 @media (max-width: 900px) {
   .dai-panel {
     top: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     z-index: 1301;
-    border-left: none;
+    border: none;
+    border-radius: 0;
     box-shadow: var(--dai-shadow);
+    transform: translateX(100%);
   }
   .dai-scrim {
     display: block;
@@ -182,6 +212,7 @@ body.dai-docked .astryx-layout-content {
   .dai-scrim[data-open='true'] {
     opacity: 1;
   }
+  body.dai-docked .dai-page,
   body.dai-docked .astryx-layout-content {
     padding-right: 0;
   }
@@ -194,20 +225,22 @@ body.dai-docked .astryx-layout-content {
    -------------------------------------------------------------------------- */
 .dai-root .dai-header {
   flex: 0 0 auto;
-  padding: 14px 12px 12px 14px;
-  border-bottom: 1px solid var(--dai-border);
+  padding: 14px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  background: #ffffff;
 }
 .dai-root .dai-title {
-  font-size: 15px;
-  font-weight: 650;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
-  color: var(--dai-text);
+  color: #0f172a;
 }
 .dai-root .dai-subtitle {
   font-size: 12px;
   line-height: 1.3;
-  color: var(--dai-text-muted);
+  color: #64748b;
+  font-weight: 500;
 }
 /* The AI mark. A soft gradient orb — not a robot face. */
 .dai-root .dai-spark {
@@ -215,8 +248,9 @@ body.dai-docked .astryx-layout-content {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  border-radius: 999px;
-  background: var(--dai-surface);
+  border-radius: 10px;
+  background: #fff1f2;
+  border: 1px solid #ffe4e6;
   overflow: hidden;
 }
 /* The mark's own canvas is only 66.8% content — a third of every edge is
@@ -277,15 +311,7 @@ body.dai-docked .astryx-layout-content {
 }
 /* Page-context strip — "Orders · Today · All locations" */
 .dai-root .dai-context {
-  flex: 0 0 auto;
-  padding: 7px 14px;
-  font-size: 11.5px;
-  color: var(--dai-text-muted);
-  background: var(--dai-surface-alt);
-  border-bottom: 1px solid var(--dai-border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: none;
 }
 /* --------------------------------------------------------------------------
    Welcome state
@@ -360,61 +386,87 @@ body.dai-docked .astryx-layout-content {
    They wrap, they never scroll. A horizontal scroller can always leave a chip
    half-visible at the edge, and a half-visible button is a bug no amount of
    fade masking fixes. */
+.dai-root .dai-suggestions-bar .dai-section-label {
+  display: none;
+}
 .dai-root .dai-suggestions {
+  /* Row + wrap, which is what the comment above always claimed and what the
+     component asks for — SuggestionChips renders an HStack with wrap="wrap".
+     This rule said `column`, overriding it, so four chips became four full
+     rows and the strip ate a third of the panel before a single question had
+     been asked. Two short chips now share a row and only long ones take one to
+     themselves. */
   width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+  align-content: flex-start;
 }
 
 .dai-suggestion {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   max-width: 100%;
-  padding: 5px 10px;
+  /* Trimmed from 8px 18px. At the 320px floor the old horizontal padding put
+     36px of empty pill around every label, which is what stopped two chips
+     ever fitting side by side. */
+  padding: 7px 13px;
   text-align: left;
+  /* A chip is one line. Without this the flex row can hand a chip a width
+     narrower than its label and the text wraps inside the pill, which is what
+     made the strip look ragged. The ellipsis itself is on
+     .dai-suggestion-text — see there. */
+  white-space: nowrap;
+  overflow: hidden;
   font: inherit;
-  font-size: 12px;
-  line-height: 1.35;
+  font-size: 13px;
+  line-height: 1.4;
   font-weight: 500;
-  color: var(--dai-text);
-  background: var(--dai-surface);
-  border: 1px solid var(--dai-border);
-  /* 14px, pinned — NOT 999px.
-     
-     On a one-line chip a fully round radius already resolves to about 14px, so
-     these look identical. The difference shows on a chip whose question wraps
-     to two lines: 999px would resolve to half of ~46px and the chip stops
-     reading as a chip and starts reading as a card, so one long suggestion
-     would look like a different component from the nineteen beside it. */
-  border-radius: 14px;
+  color: #334155;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 9999px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
   cursor: pointer;
-  transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    transform 140ms ease;
+  transition: all 140ms ease;
 }
 .dai-suggestion:hover {
-  background: var(--dai-surface-alt);
-  border-color: var(--dai-border-strong);
+  background: #f8fafc;
+  border-color: #cbd5e1;
+  color: #0f172a;
   transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
 }
 .dai-suggestion:active {
   transform: translateY(0);
 }
 .dai-suggestion:focus-visible {
-  outline: 2px solid var(--dai-accent);
+  outline: 2px solid #0f172a;
   outline-offset: 2px;
 }
 .dai-root .dai-suggestion-icon {
   flex: 0 0 auto;
-  color: var(--dai-text-muted);
+  color: #64748b;
   transition: color 140ms ease;
 }
 .dai-suggestion:hover .dai-suggestion-icon {
-  color: var(--dai-text-secondary);
+  color: #0f172a;
 }
 .dai-root .dai-suggestion-text {
+  /* The ellipsis lives here, not on the button: text-overflow needs the
+     element that actually holds the text, and the button is a flex container
+     whose children are the icon and this span. min-width:0 is what lets the
+     span shrink below its content width so the ellipsis can engage at all —
+     a flex item defaults to min-width:auto and would push the pill wider
+     instead. The button already carries title={item.text}, so the full
+     question is still available when a label is cut. */
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* Plain text link-button ("View more", "Sources") */
 .dai-link {
@@ -695,26 +747,29 @@ body.dai-docked .astryx-layout-content {
    -------------------------------------------------------------------------- */
 .dai-root .dai-composer-wrap {
   flex: 0 0 auto;
-  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
-  border-top: 1px solid var(--dai-border);
-  background: var(--dai-surface);
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid #f1f5f9;
+  background: #ffffff;
 }
 .dai-root .dai-composer {
-  border: 1px solid var(--dai-border-strong);
-  /* 14px, the same corner the suggestion chips use. At 5px the input was the
-     one sharp-cornered thing in a panel of rounded surfaces, and it sat
-     directly beneath the chips where the mismatch was most visible. */
-  border-radius: 14px;
-  background: var(--dai-surface);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-  padding: 10px 10px 8px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 9999px;
+  background: #f8fafc;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+  padding: 6px 6px 6px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
   transition:
     border-color 140ms ease,
-    box-shadow 140ms ease;
+    box-shadow 140ms ease,
+    background-color 140ms ease;
 }
 .dai-root .dai-composer[data-focused='true'] {
-  border-color: var(--dai-accent);
-  box-shadow: 0 0 0 3px var(--dai-accent-ring);
+  background: #ffffff;
+  border-color: #cbd5e1;
+  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
 }
 
 /* --------------------------------------------------------------------------
@@ -811,13 +866,13 @@ body.dai-docked .astryx-layout-content {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: var(--dai-accent);
-  color: var(--dai-accent-contrast);
+  background: #2563eb;
+  color: #ffffff;
   cursor: pointer;
   transition:
     background-color 140ms ease,
@@ -825,29 +880,32 @@ body.dai-docked .astryx-layout-content {
     transform 140ms ease;
 }
 .dai-root .dai-send:hover:not(:disabled) {
-  opacity: 0.86;
+  background: #1d4ed8;
+  transform: scale(1.05);
 }
 .dai-root .dai-send:active:not(:disabled) {
-  transform: scale(0.94);
+  transform: scale(0.96);
 }
 .dai-root .dai-send:focus-visible {
-  outline: 2px solid var(--dai-accent);
+  outline: 2px solid #2563eb;
   outline-offset: 2px;
 }
 /* Disabled is the resting state until something is typed, so it has to read as
    "not yet", not as "broken" — a filled grey circle, same shape and weight. */
 .dai-root .dai-send:disabled {
-  background: var(--dai-surface-hover);
-  color: var(--dai-text-muted);
+  background: #f1f5f9;
+  color: #94a3b8;
   cursor: default;
 }
 .dai-root .dai-composer textarea {
   display: block;
+  flex: 1 1 auto;
   width: 100%;
+  min-width: 0;
   border: none;
   outline: none;
   resize: none;
-  padding: 0;
+  padding: 4px 0;
   margin: 0;
   font: inherit;
   font-size: 13.5px;
@@ -914,15 +972,36 @@ body.dai-docked .astryx-layout-content {
 /* --------------------------------------------------------------------------
    Responsive
    -------------------------------------------------------------------------- */
-@media (max-width: 1279px) {
-  .dai-root {
-    --dai-panel-width: 396px;
+/* Tablet and small laptop, 768-900px: the panel is a full-width overlay with a
+   scrim (see the max-width:900px block above), so the only thing left to do is
+   stop the suggestion strip from taking a third of a short screen — there is
+   much less height to spend here than on a desktop. */
+@media (max-width: 900px) {
+  .dai-root .dai-suggestions-bar {
+    max-height: 26vh;
   }
 }
+
+/* The block that used to sit here set `--dai-panel-width: 396px` at 1279px.
+   That variable is declared and never read — the panel sizes from
+   --dai-dock-width — so the rule had no effect on anything. Removed rather
+   than left looking load-bearing. */
+
 @media (max-width: 767px) {
   .dai-root {
     --dai-inset: 0px;
   }
+  /* Phone: chips get a touch target and room to breathe, and the strip is
+     capped harder still because the on-screen keyboard takes the bottom half
+     of the viewport the moment the composer is focused. */
+  .dai-root .dai-suggestions-bar {
+    max-height: 22vh;
+    padding: 8px 12px 6px;
+  }
+  .dai-suggestion {
+    padding: 9px 14px;
+    font-size: 13px;
+  }
   .dai-panel {
     width: 100vw;
     max-width: 100vw;
diff --git a/src/components/assistant/DoormileAI/AIComposer.jsx b/src/components/assistant/DoormileAI/AIComposer.jsx
index 31f91bf..3bd2d39 100644
--- a/src/components/assistant/DoormileAI/AIComposer.jsx
+++ b/src/components/assistant/DoormileAI/AIComposer.jsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { LuArrowUp } from 'react-icons/lu';
+import { LuSend } from 'react-icons/lu';
 
 import { HStack } from '@astryxdesign/core/HStack';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -111,7 +111,7 @@ const AIComposer = ({ value, onChange, onSubmit, isBusy, placeholder }) => {
 
   return (
     <VStack className="dai-composer-wrap" gap={1} padding={0}>
-      <VStack className="dai-composer" data-focused={isFocused} gap={1} padding={0}>
+      <HStack className="dai-composer" data-focused={isFocused} gap={1} padding={0} vAlign="center">
         <textarea
           ref={textareaRef}
           rows={1}
@@ -120,13 +120,9 @@ const AIComposer = ({ value, onChange, onSubmit, isBusy, placeholder }) => {
           onKeyDown={handleKeyDown}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
-          placeholder={placeholder}
-          aria-label="Ask Doormile AI about operations"
+          placeholder={placeholder || 'Ask MileTruth anything...'}
+          aria-label="Ask MileTruth about operations"
         />
-        {/* Both controls group on the RIGHT. `justify="between"` pushed the mic
-            to the far left and the send button to the far right, leaving a
-            wide dead gap between two things that do the same job — put a
-            message in. Together they read as one action cluster. */}
         <HStack gap={1} padding={0} vAlign="center" justify="end">
           <ChatDictationButton dictation={dictation} size="sm" className="dai-mic" />
           <button
@@ -136,10 +132,10 @@ const AIComposer = ({ value, onChange, onSubmit, isBusy, placeholder }) => {
             disabled={!canSend}
             aria-label={isBusy ? 'Waiting for the current answer' : 'Send message'}
           >
-            <LuArrowUp size={16} strokeWidth={2.4} aria-hidden="true" />
+            <LuSend size={15} aria-hidden="true" />
           </button>
         </HStack>
-      </VStack>
+      </HStack>
       <Text className="dai-hint">
         {dictation.isListening ? 'Listening — sends automatically after a short pause' : 'Enter to send · Shift + Enter for a new line'}
       </Text>
diff --git a/src/components/assistant/DoormileAI/AIMessage.jsx b/src/components/assistant/DoormileAI/AIMessage.jsx
index feb58aa..cde00f9 100644
--- a/src/components/assistant/DoormileAI/AIMessage.jsx
+++ b/src/components/assistant/DoormileAI/AIMessage.jsx
@@ -43,7 +43,7 @@ const AssistantMessage = ({ message, onCopy, onSubmitForm, onCancelAction, onCho
       <HStack gap={1.5} padding={0} vAlign="center" justify="between">
         <HStack gap={1} padding={0} vAlign="center">
           <Spark size="sm" />
-          <Text className="dai-msg-name">Doormile AI</Text>
+          <Text className="dai-msg-name">MileTruth</Text>
         </HStack>
         <HStack className="dai-msg-actions" gap={0} padding={0}>
           <IconButton
diff --git a/src/components/assistant/DoormileAI/AIPanel.jsx b/src/components/assistant/DoormileAI/AIPanel.jsx
index 93baf57..ed27346 100644
--- a/src/components/assistant/DoormileAI/AIPanel.jsx
+++ b/src/components/assistant/DoormileAI/AIPanel.jsx
@@ -4,8 +4,17 @@ import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
-import { AiOutlineClose as CloseOutlined, AiOutlineMore as MoreOutlined } from 'react-icons/ai';
-import { LuChevronDown, LuPanelRightOpen, LuPanelRightClose, LuHistory, LuTrash2, LuMessageSquare } from 'react-icons/lu';
+import { AiOutlineMore as MoreOutlined } from 'react-icons/ai';
+import {
+  LuChevronDown,
+  LuHistory,
+  LuTrash2,
+  LuMessageSquare,
+  LuRotateCcw,
+  LuMaximize2,
+  LuMinimize2,
+  LuX
+} from 'react-icons/lu';
 
 import { HStack } from '@astryxdesign/core/HStack';
 import { VStack } from '@astryxdesign/core/VStack';
@@ -51,14 +60,17 @@ const CONVERSATIONS_KEY = 'doormileBotConversations';
 const CONVERSATIONS_LIMIT = 25;
 const PIN_THRESHOLD_PX = 48;
 
-// Dock widths. Each is a percentage of the viewport with a pixel floor — 25vw
-// is only 320px on a 1280 laptop, and the floor catches anything narrower than
-// that, below which the panel stops being readable. Both values are also what
-// the page reserves beside the panel, so they must stay a single expression
-// (see the --dai-dock-width comment in DoormileAI.css for why a percentage
-// cannot be used here).
-const DOCK_NORMAL = 'max(300px, 25vw)';
-const DOCK_WIDE = 'max(340px, 30vw)';
+// Dock widths. Each is a viewport fraction with a pixel floor — 20vw is only
+// 256px on a 1280 laptop, and the floor catches anything narrower than that,
+// below which the composer and the thread stop being readable. Both values are
+// also what the page reserves beside the panel, so they must stay a single
+// expression (see the --dai-dock-width comment in DoormileAI.css for why a
+// percentage cannot be used here).
+// Must stay byte-identical to the --dai-dock-width default in DoormileAI.css:
+// the CSS value applies before this effect runs on first paint, and any
+// difference between the two shows as the page jumping sideways on load.
+const DOCK_NORMAL = 'clamp(320px, 20vw, 460px)';
+const DOCK_WIDE = 'clamp(420px, 30vw, 680px)';
 const WIDTH_KEY = 'doormileBotWidth';
 
 // Seeded from the clock, not from 1.
@@ -1378,7 +1390,7 @@ const AIPanel = ({ isOpen, onClose }) => {
     ? nextSteps.length > 0
       ? nextSteps
       : pageContext.suggestions.slice(0, 4)
-    : [...pageContext.suggestions, ...(pageContext.more || [])];
+    : pageContext.suggestions.slice(0, 4);
 
   // Few chips => the strip is fixed and always fully visible. Twenty => it may
   // shrink and scroll. See the [data-compact] rule in DoormileAI.css.
@@ -1401,7 +1413,7 @@ const AIPanel = ({ isOpen, onClose }) => {
            stays live and operable, so announcing it as a dialog would be a
            lie to exactly the users who cannot see that it is docked. */
         role="complementary"
-        aria-label="Doormile AI — Operations Copilot"
+        aria-label="MileTruth — Operations Copilot"
         tabIndex={-1}
       >
         {/* ---- header ---- */}
@@ -1410,30 +1422,16 @@ const AIPanel = ({ isOpen, onClose }) => {
             <HStack gap={1.5} padding={0} vAlign="center">
               <Spark size="md" />
               <VStack gap={0} padding={0}>
-                <Text className="dai-title">Doormile AI</Text>
+                <Text className="dai-title">MileTruth</Text>
                 <Text className="dai-subtitle">Operations Copilot</Text>
               </VStack>
             </HStack>
             <HStack gap={1} padding={0} vAlign="center">
-              <LiveIndicator />
-              {/* No `size` prop on the icon — deliberately.
-                  
-                  Its two siblings here are Ant Design icons, which render at
-                  1em and so inherit the button's 16px. Pinning this one to 15
-                  made it a pixel smaller than the ⋯ and × beside it, which is
-                  exactly the kind of one-pixel mismatch that reads as "off"
-                  without being obviously wrong. Left unset, react-icons also
-                  defaults to 1em and all three track the button together.
-                  
-                  Panel icons rather than chevrons: a bare chevron next to a
-                  close button is ambiguous (collapse? navigate? close?),
-                  whereas these draw the side panel itself getting wider or
-                  narrower, which is literally what the control does. */}
               <IconButton
                 size="sm"
                 variant="ghost"
-                label={view === 'history' ? 'Back to the conversation' : 'Conversation history'}
-                tooltip={view === 'history' ? 'Back to the conversation' : 'History'}
+                label={view === 'history' ? 'Back to conversation' : 'Conversation history'}
+                tooltip={view === 'history' ? 'Back to conversation' : 'History'}
                 aria-pressed={view === 'history'}
                 icon={view === 'history' ? <LuMessageSquare /> : <LuHistory />}
                 onClick={() => setView((v) => (v === 'history' ? 'chat' : 'history'))}
@@ -1441,39 +1439,32 @@ const AIPanel = ({ isOpen, onClose }) => {
               <IconButton
                 size="sm"
                 variant="ghost"
-                label={isWide ? 'Narrow the assistant' : 'Widen the assistant'}
-                tooltip={isWide ? 'Narrow to 25%' : 'Widen to 30%'}
-                aria-pressed={isWide}
-                icon={isWide ? <LuPanelRightClose /> : <LuPanelRightOpen />}
-                onClick={() => setIsWide((v) => !v)}
+                label="New conversation"
+                tooltip="New conversation"
+                icon={<LuRotateCcw />}
+                onClick={newConversation}
               />
-              <DropdownMenu
-                hasChevron={false}
-                button={{ label: 'Conversation options', icon: <MoreOutlined />, isIconOnly: true, variant: 'ghost', size: 'sm' }}
-                items={[
-                  // These were both wired to clearConversation, so the safe
-                  // option and the destructive one did the same thing. Now
-                  // "New" keeps the thread and "Delete" says that it does not.
-                  { label: 'New conversation', onClick: newConversation },
-                  { label: 'Conversation history', onClick: () => setView('history') },
-                  { label: 'Delete this conversation', onClick: clearConversation }
-                ]}
+              <IconButton
+                size="sm"
+                variant="ghost"
+                label={isWide ? 'Standard width (20%)' : 'Expand width (30%)'}
+                tooltip={isWide ? 'Standard width (20%)' : 'Expand width (30%)'}
+                aria-pressed={isWide}
+                icon={isWide ? <LuMinimize2 /> : <LuMaximize2 />}
+                onClick={() => setIsWide((v) => !v)}
               />
               <IconButton
                 size="sm"
                 variant="ghost"
                 label="Close assistant"
                 tooltip="Close assistant"
-                icon={<CloseOutlined />}
+                icon={<LuX />}
                 onClick={onClose}
               />
             </HStack>
           </HStack>
         </VStack>
 
-        {/* ---- page context ---- */}
-        <Text className="dai-context">{pageContext.label} · Today · All locations</Text>
-
         {/* ---- conversation / welcome ---- */}
         <VStack className="dai-scroll-wrap" gap={0} padding={0}>
           <VStack ref={scrollRef} className="dai-scroll" gap={0} padding={0} onScroll={handleScroll}>
@@ -1525,7 +1516,7 @@ const AIPanel = ({ isOpen, onClose }) => {
                   <VStack className="dai-msg" gap={1.5} padding={0}>
                     <HStack gap={1} padding={0} vAlign="center">
                       <Spark size="sm" />
-                      <Text className="dai-msg-name">Doormile AI</Text>
+                      <Text className="dai-msg-name">MileTruth</Text>
                     </HStack>
                     <TypingIndicator />
                   </VStack>
@@ -1563,7 +1554,7 @@ const AIPanel = ({ isOpen, onClose }) => {
         )}
 
         {/* ---- composer ---- */}
-        <AIComposer value={value} onChange={setValue} onSubmit={ask} isBusy={isSending} placeholder="Ask about orders, riders, hubs…" />
+        <AIComposer value={value} onChange={setValue} onSubmit={ask} isBusy={isSending} placeholder="Ask about orders, milers, hubs…" />
       </VStack>
     </>,
     document.body
diff --git a/src/components/assistant/DoormileAI/AIParts.jsx b/src/components/assistant/DoormileAI/AIParts.jsx
index 93d63dd..0193b3c 100644
--- a/src/components/assistant/DoormileAI/AIParts.jsx
+++ b/src/components/assistant/DoormileAI/AIParts.jsx
@@ -38,7 +38,7 @@ LiveIndicator.propTypes = { label: PropTypes.string };
 // Thinking state. Three dots plus two shimmer bars — enough to read as
 // "working", not enough to be a light show.
 export const TypingIndicator = () => (
-  <VStack gap={1.5} padding={0} aria-live="polite" aria-label="Doormile AI is thinking">
+  <VStack gap={1.5} padding={0} aria-live="polite" aria-label="MileTruth is thinking">
     <HStack className="dai-typing" padding={0} gap={0} aria-hidden="true">
       <span />
       <span />
diff --git a/src/components/assistant/DoormileAI/AIWelcome.jsx b/src/components/assistant/DoormileAI/AIWelcome.jsx
index 4649b26..c4e56f1 100644
--- a/src/components/assistant/DoormileAI/AIWelcome.jsx
+++ b/src/components/assistant/DoormileAI/AIWelcome.jsx
@@ -77,7 +77,7 @@ const AIWelcome = () => {
         <Text className="dai-welcome-lead">How can I help with today&rsquo;s operations?</Text>
       </VStack>
       <Text className="dai-welcome-note">
-        I read live orders, riders, vehicles and hubs. Every number comes from a real call — I never estimate one.
+        I read live orders, milers, vehicles and hubs. Every number comes from a real call — I never estimate one.
       </Text>
     </VStack>
   );
diff --git a/src/components/assistant/DoormileAI/index.jsx b/src/components/assistant/DoormileAI/index.jsx
index 34f488c..01c4a54 100644
--- a/src/components/assistant/DoormileAI/index.jsx
+++ b/src/components/assistant/DoormileAI/index.jsx
@@ -23,13 +23,13 @@ const DoormileAITrigger = () => {
 
   return (
     <>
-      <Tooltip content="Doormile AI">
+      <Tooltip content="MileTruth">
         <button
           ref={buttonRef}
           type="button"
           className="dai-root dai-trigger"
           data-active={isOpen}
-          aria-label="Open Doormile AI"
+          aria-label="Open MileTruth"
           aria-expanded={isOpen}
           onClick={() => (isOpen ? close() : setIsOpen(true))}
         >
diff --git a/src/components/doormile/assistant/AssistantPanel.jsx b/src/components/doormile/assistant/AssistantPanel.jsx
index c798a31..73dbbac 100644
--- a/src/components/doormile/assistant/AssistantPanel.jsx
+++ b/src/components/doormile/assistant/AssistantPanel.jsx
@@ -309,7 +309,7 @@ export function AssistantPanel({ open, onClose }) {
 
       <aside
         role="dialog"
-        aria-label="Doormile AI"
+        aria-label="MileTruth"
         className="fixed right-0 top-0 z-50 flex h-dvh w-full flex-col border-l border-border bg-surface shadow-xl sm:w-[26rem]"
       >
         <header className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
@@ -318,7 +318,7 @@ export function AssistantPanel({ open, onClose }) {
               <Sparkles className="h-4 w-4" aria-hidden="true" />
             </span>
             <div className="min-w-0">
-              <p className="text-body-sm font-semibold text-ink-1">Doormile AI</p>
+              <p className="text-body-sm font-semibold text-ink-1">MileTruth</p>
               <p className="truncate text-caption text-ink-3">Operations copilot · {label}</p>
             </div>
           </div>
diff --git a/src/components/ds/Tabs.jsx b/src/components/ds/Tabs.jsx
index 0adade0..1ac9811 100644
--- a/src/components/ds/Tabs.jsx
+++ b/src/components/ds/Tabs.jsx
@@ -14,6 +14,28 @@ import { Badge } from '@/components/ui/badge';
  * between tabs the same way the main nav pill does. `layoutGroupId` must be
  * unique when two tab sets are on screen at once, otherwise the indicator
  * animates between them.
+ *
+ * ── The strip scrolls itself ──
+ *
+ * A tab row is one non-wrapping line whose width is decided by its caller's
+ * data, and it is routinely wider than the space it is given: Deliveries has
+ * ten status tabs at roughly 1050px, and the assistant dock takes 30% of the
+ * viewport back (40% expanded) and now opens by default above 1024px. On a
+ * 1350px screen that leaves about 900px, so the last two tabs — Delivered and
+ * Cancelled — were simply unreachable. Not merely clipped: with nothing
+ * scrollable around them there was no gesture that could bring them back.
+ *
+ * Four of the six pages using this component had each hand-rolled the same
+ * wrapper to cope; the two that had not were broken. That ratio is the
+ * argument for putting it here. A component that renders a row of unknown
+ * length owns its own overflow — leaving it to every caller means it works
+ * until somebody adds a tab, and then it silently stops.
+ *
+ * The negative margin paired with equal padding is not cosmetic: `overflow-x`
+ * clips the focus ring on the first and last tab, and the pair gives the ring
+ * room without shifting the strip's visual position. It also makes the wrapper
+ * idempotent, so the four pages that still nest their own around it render
+ * identically.
  */
 /** @param {any} props */
 export function Tabs({
@@ -30,20 +52,62 @@ export function Tabs({
   const fallbackId = React.useId();
   const groupId = layoutGroupId || fallbackId;
 
+  const trackRef = React.useRef(null);
+  const activeRef = React.useRef(null);
+
+  // Keep the selected tab in view.
+  //
+  // Selection moves without a click — a deep link, a cleared filter, restored
+  // state — and landing on a page whose active tab sits off the right edge
+  // looks identical to landing on a page with no tab selected at all.
+  //
+  // Scrolls the TRACK's own scrollLeft rather than calling scrollIntoView,
+  // which walks every scrollable ancestor and would yank the whole page when
+  // the strip happens to sit below the fold.
+  React.useEffect(() => {
+    const track = trackRef.current;
+    const active = activeRef.current;
+    if (!track || !active) return;
+
+    const left = active.offsetLeft;
+    const right = left + active.offsetWidth;
+    const viewLeft = track.scrollLeft;
+    const viewRight = viewLeft + track.clientWidth;
+    if (left >= viewLeft && right <= viewRight) return;
+
+    track.scrollTo({
+      left: Math.max(0, left - (track.clientWidth - active.offsetWidth) / 2),
+      behavior: 'smooth',
+    });
+  }, [value]);
+
+  // The scroll track. `min-w-0` is what actually lets it shrink inside a flex
+  // parent — without it a flex item refuses to go below its content width and
+  // overflows the page instead of scrolling inside itself.
+  const track = (children) => (
+    <div ref={trackRef} className="-mx-1 max-w-full min-w-0 overflow-x-auto px-1 py-0.5">
+      {children}
+    </div>
+  );
+
   if (variant === 'underline') {
-    return (
-      <div role="tablist" aria-label={ariaLabel} className={cn('flex items-center gap-1 border-b border-border', className)}>
+    return track(
+      // `w-max` lets the row grow past the track so there is something to
+      // scroll; `min-w-full` keeps the bottom border spanning the full width
+      // when the tabs do not fill it.
+      <div role="tablist" aria-label={ariaLabel} className={cn('flex w-max min-w-full items-center gap-1 border-b border-border', className)}>
         {normalized.map((tab) => {
           const active = tab.value === value;
           return (
             <button
               key={tab.value}
+              ref={active ? activeRef : undefined}
               type="button"
               role="tab"
               aria-selected={active}
               onClick={() => onChange?.(tab.value)}
               className={cn(
-                'relative inline-flex items-center gap-2 px-3 pb-2.5 pt-1.5 font-medium transition-colors duration-base focus-ring-inset rounded-t-md',
+                'relative inline-flex shrink-0 items-center gap-2 px-3 pb-2.5 pt-1.5 font-medium transition-colors duration-base focus-ring-inset rounded-t-md',
                 size === 'sm' ? 'text-body-sm' : 'text-body',
                 active ? 'text-brand' : 'text-ink-3 hover:text-ink-1'
               )}
@@ -67,12 +131,14 @@ export function Tabs({
     );
   }
 
-  return (
+  return track(
     <div
       role="tablist"
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex items-center gap-1 rounded-full bg-white/60 backdrop-blur-xl p-1 border border-white/50 shadow-sm',
+        // `w-max` so the pill rail sizes to its tabs and overflows the track
+        // rather than compressing them into each other.
+        'inline-flex w-max items-center gap-1 rounded-full bg-white/60 backdrop-blur-xl p-1 border border-white/50 shadow-sm',
         className
       )}
     >
@@ -81,12 +147,16 @@ export function Tabs({
         return (
           <button
             key={tab.value}
+            ref={active ? activeRef : undefined}
             type="button"
             role="tab"
             aria-selected={active}
             onClick={() => onChange?.(tab.value)}
             className={cn(
-              'relative inline-flex items-center gap-1.5 rounded-full font-medium transition-colors duration-base focus-ring',
+              // shrink-0: without it the flex row squashes ten tabs into the
+              // available width instead of overflowing, and the track has
+              // nothing to scroll.
+              'relative inline-flex shrink-0 items-center gap-1.5 rounded-full font-medium transition-colors duration-base focus-ring',
               size === 'sm' ? 'px-3 py-1 text-caption' : 'px-4 py-1.5 text-body-sm',
               active ? 'text-white' : 'text-ink-3 hover:text-ink-1'
             )}
diff --git a/src/layouts/AdminLayout.jsx b/src/layouts/AdminLayout.jsx
index 228cdba..74dd9a5 100644
--- a/src/layouts/AdminLayout.jsx
+++ b/src/layouts/AdminLayout.jsx
@@ -2,10 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import {
-  Bell, ChevronDown, LogOut, Menu, Search, Shield, User,
+  Activity, Bell, Bike, Building2, Car, ChevronDown, Coins, FileSpreadsheet,
+  FileText, IndianRupee, ListTodo, LogOut, Menu, Search, Settings, Shield,
+  ShieldAlert, User, UserCheck, Users, Warehouse,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { DOORMILE_WORDMARK_URL } from '@/assets/brand';
+import { DOORMILE_MARK_URL, DOORMILE_WORDMARK_URL } from '@/assets/brand';
 import { Avatar } from '@/components/ds/Avatar';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -23,23 +25,22 @@ import AIPanel from '@/components/assistant/DoormileAI/AIPanel';
  * The console shell.
  *
  * Single 56px header bar, compact search with a keyboard shortcut, hairline tab
- * indicator, mobile sheet — the design is unchanged. What changed is what it
- * points at: the Doormile Express destinations rather than the hiring ones.
+ * indicator, mobile sheet.
  *
- * Seven destinations sit on the bar and the remaining eleven live in two
- * grouped menus (Fleet Ops, Reports), built from the same DropdownMenu the
- * account menu already uses. Eighteen flat tabs would not fit a 56px bar at any
- * width, and a console header should recede rather than become the loudest
- * thing on the page.
+ * Core destinations sit on the bar; the rest live in two grouped menus on it
+ * (Fleet Ops, Reports) plus a Settings section inside the account menu, which
+ * holds the two destinations that are configuration rather than operations
+ * (Pricing Matrix, Customers Directory).
+ *
+ * Said precisely because the previous wording — "three grouped menus (Fleet
+ * Ops, Reports, Settings)" — sent a reader looking for a third NAV_GROUPS
+ * entry that does not exist, and hid the fact that the Settings pair is
+ * reached by a different route from everything else. That difference is
+ * exactly what made them unreachable on mobile.
  */
 
 const ROOT = '/doormile';
 
-/* `doormile-logo.png` is a white wordmark — invisible on this bar's light
-   chrome as-is. Recolored to brand red via filter rather than swapping the
-   asset, same trick the source console's own TopNav uses on the identical
-   file, so the two headers render the mark in the same color from the same
-   source PNG. */
 const LOGO_FILTER = {
   filter: 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)',
 };
@@ -52,8 +53,6 @@ const NAV = [
   { label: 'Deliveries', path: '/doormile/deliveries' },
   { label: 'Milers', path: '/doormile/milers' },
   { label: 'Clients', path: '/doormile/tenants' },
-  { label: 'Pricing', path: '/doormile/pricing' },
-  { label: 'Customers', path: '/doormile/customers' },
 ];
 
 /** Destinations grouped behind a menu, in the order the console lists them. */
@@ -61,27 +60,45 @@ const NAV_GROUPS = [
   {
     label: 'Fleet Ops',
     items: [
-      { label: 'Hubs', path: '/doormile/hubs' },
-      { label: 'Vehicles', path: '/doormile/vehicles' },
-      { label: 'Tripsheets', path: '/doormile/tripsheets' },
-      { label: 'Exceptions', path: '/doormile/exceptions' },
-      { label: 'Competitive Intel', path: '/doormile/competitive-intel' },
-      { label: 'App Users', path: '/doormile/app-users' },
+      { label: 'Hubs', path: '/doormile/hubs', icon: Warehouse, desc: 'Sortation centers & facilities' },
+      { label: 'Vehicles', path: '/doormile/vehicles', icon: Car, desc: 'Fleet register & EV telematics' },
+      { label: 'Tripsheets', path: '/doormile/tripsheets', icon: ListTodo, desc: 'Linehaul & middle-mile runs' },
+      { label: 'Exceptions', path: '/doormile/exceptions', icon: ShieldAlert, desc: 'Live alerts & delivery blockers' },
+      { label: 'Competitive Intel', path: '/doormile/competitive-intel', icon: Activity, desc: 'Benchmarking & market rates' },
+      { label: 'App Users', path: '/doormile/app-users', icon: UserCheck, desc: 'System operators & roles' },
     ],
   },
   {
     label: 'Reports',
     items: [
-      { label: 'Orders Summary', path: '/doormile/reports/orderssummary' },
-      { label: 'Orders Details', path: '/doormile/reports/ordersdetails' },
-      { label: 'Riders Summary', path: '/doormile/reports/riderssummary' },
-      { label: 'Profitability', path: '/doormile/reports/profitability' },
+      { label: 'Orders Summary', path: '/doormile/reports/orderssummary', icon: FileSpreadsheet, desc: 'Daily volume & status aggregations' },
+      { label: 'Orders Details', path: '/doormile/reports/ordersdetails', icon: FileText, desc: 'Granular leg-by-leg breakdown' },
+      { label: 'Milers Summary', path: '/doormile/reports/riderssummary', icon: Bike, desc: 'Fleet KPIs & on-duty shifts' },
+      { label: 'Profitability', path: '/doormile/reports/profitability', icon: Coins, desc: 'Gross margin & variable costs' },
     ],
   },
 ];
 
-/** Every destination, flattened — what the mobile sheet renders. */
-const ALL_DESTINATIONS = [...NAV, ...NAV_GROUPS.flatMap((group) => group.items)];
+/* Configuration destinations, kept off the operations bar.
+ *
+ * Declared here rather than written inline in the account dropdown because
+ * two surfaces need them: that dropdown on desktop, and the mobile sheet.
+ * When they lived only in the dropdown's JSX, moving them off the bar quietly
+ * removed them from the phone entirely — the sheet builds its list from NAV
+ * plus NAV_GROUPS, and these were in neither. Both pages stayed routed and
+ * reachable by typed URL, which is the kind of gap nobody reports and nobody
+ * finds.
+ *
+ * (This replaces an ALL_DESTINATIONS constant that flattened NAV and
+ * NAV_GROUPS. Its comment claimed it was "what the mobile sheet renders"; the
+ * sheet had moved to a role-filtered local of the same name in lower case, so
+ * the constant had no readers at all and would have reintroduced the same
+ * omission if anyone had trusted it.)
+ */
+const SETTINGS_NAV = [
+  { label: 'Pricing Matrix', path: '/doormile/pricing', icon: IndianRupee },
+  { label: 'Customers Directory', path: '/doormile/customers', icon: Users },
+];
 
 function GlobalSearch() {
   const navigate = useNavigate();
@@ -225,7 +242,27 @@ export default function AdminLayout() {
   const navigate = useNavigate();
   const { user, isClient, logout } = useAuth();
   const [menuOpen, setMenuOpen] = useState(false);
-  const [assistantOpen, setAssistantOpen] = useState(false);
+  const [assistantOpen, setAssistantOpen] = useState(() => {
+    try {
+      const saved = localStorage.getItem('doormileAssistantOpen');
+      if (saved !== null) return saved === 'true';
+    } catch {
+      /* ignore */
+    }
+    return typeof window !== 'undefined' ? window.innerWidth >= 1024 : true;
+  });
+
+  const toggleAssistant = (nextState) => {
+    setAssistantOpen((prev) => {
+      const next = typeof nextState === 'function' ? nextState(prev) : nextState;
+      try {
+        localStorage.setItem('doormileAssistantOpen', String(next));
+      } catch {
+        /* ignore */
+      }
+      return next;
+    });
+  };
 
   const navItems = useMemo(() => {
     if (isClient) {
@@ -253,6 +290,7 @@ export default function AdminLayout() {
   const groupIsActive = (group) => group.items.some((item) => isActive(item.path));
 
   const displayName = user?.displayname || user?.authname || user?.name || 'Operator';
+  const isHome = location.pathname === '/doormile/home' || location.pathname === '/doormile' || location.pathname === '/';
 
   return (
     /* Transparent so the ambient canvas painted behind the app reads through.
@@ -265,22 +303,14 @@ export default function AdminLayout() {
       <header data-app-header className="sticky top-0 z-50 border-b border-border bg-white/85 backdrop-blur-xl">
         <div className="flex h-14 items-center justify-between gap-4 px-4 lg:px-6">
           <Link
-            to="/doormile/dispatch"
-            aria-label="Doormile Express — Dispatch"
-            className="flex shrink-0 items-center rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50"
+            to="/doormile/home"
+            aria-label="Doormile Express — Home"
+            className="flex shrink-0 items-center rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50 transition-transform active:scale-95"
           >
-            {/* Full wordmark, not just the circular mark — matches the source
-                console's own TopNav, which renders this same logo at the
-                same relative scale inside its bar. */}
-            {/* Capped below `sm`: at its natural 209px the wordmark plus the
-                170px action cluster overflowed a 375px phone and scrolled the
-                whole document sideways. Scaling the mark is the one thing here
-                that can give — the controls beside it all have to stay. */}
             <img
-              src={DOORMILE_WORDMARK_URL}
-              alt="Doormile Express"
-              style={LOGO_FILTER}
-              className="h-7 w-auto max-w-[120px] object-contain sm:max-w-none"
+              src={DOORMILE_MARK_URL}
+              alt="Doormile"
+              className="h-8 w-auto object-contain"
             />
           </Link>
 
@@ -316,13 +346,14 @@ export default function AdminLayout() {
                   <button
                     type="button"
                     className={cn(
-                      'relative flex items-center gap-1 whitespace-nowrap rounded-lg px-2.5 py-1.5 text-body-sm font-medium',
-                      'transition-colors duration-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
+                      'relative flex items-center gap-1.5 whitespace-nowrap rounded-lg px-2.5 py-1.5 text-body-sm font-medium',
+                      'transition-colors duration-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50 cursor-pointer',
                       groupIsActive(group) ? 'text-brand' : 'text-ink-3 hover:text-ink-1'
                     )}
                   >
-                    {group.label}
-                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                    {group.icon && <group.icon className="h-3.5 w-3.5 opacity-70" />}
+                    <span>{group.label}</span>
+                    <ChevronDown className="h-3 w-3 opacity-60" aria-hidden="true" />
                     {groupIsActive(group) && (
                       <motion.span
                         layoutId="adminNavIndicator"
@@ -332,16 +363,40 @@ export default function AdminLayout() {
                     )}
                   </button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="w-52">
-                  {group.items.map((item) => (
-                    <DropdownMenuItem
-                      key={item.path}
-                      onClick={() => navigate(item.path)}
-                      className={cn('cursor-pointer', isActive(item.path) && 'text-brand')}
-                    >
-                      {item.label}
-                    </DropdownMenuItem>
-                  ))}
+                <DropdownMenuContent align="start" className="w-64 p-1.5 rounded-2xl shadow-xl border-slate-200">
+                  {group.items.map((item) => {
+                    const ItemIcon = item.icon;
+                    const active = isActive(item.path);
+                    return (
+                      <DropdownMenuItem
+                        key={item.path}
+                        onClick={() => navigate(item.path)}
+                        className={cn(
+                          'flex items-start gap-2.5 p-2 rounded-xl cursor-pointer transition-colors my-0.5',
+                          active ? 'bg-brand-tint/80 text-brand' : 'hover:bg-slate-50 text-ink-1'
+                        )}
+                      >
+                        {ItemIcon && (
+                          <div
+                            className={cn(
+                              'w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5',
+                              active ? 'bg-brand text-white' : 'bg-slate-100 text-slate-600'
+                            )}
+                          >
+                            <ItemIcon className="w-3.5 h-3.5" />
+                          </div>
+                        )}
+                        <div className="min-w-0 flex-1">
+                          <div className="text-body-sm font-semibold">{item.label}</div>
+                          {item.desc && (
+                            <div className="text-[11px] text-ink-3 leading-tight mt-0.5 line-clamp-1">
+                              {item.desc}
+                            </div>
+                          )}
+                        </div>
+                      </DropdownMenuItem>
+                    );
+                  })}
                 </DropdownMenuContent>
               </DropdownMenu>
             ))}
@@ -350,22 +405,32 @@ export default function AdminLayout() {
           <div className="ml-auto flex items-center gap-1.5">
             <GlobalSearch />
 
-            {/* Doormile AI. A header control rather than a route: it answers
-                about live data while the operator stays on the screen that
-                raised the question. */}
-            <button
-              type="button"
-              onClick={() => setAssistantOpen((open) => !open)}
-              aria-label={assistantOpen ? 'Close Doormile AI' : 'Open Doormile AI'}
-              aria-expanded={assistantOpen}
-              className={cn(
-                'grid h-8 w-8 place-items-center rounded-lg transition-colors',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
-                assistantOpen ? 'bg-brand-tint text-brand' : 'text-ink-3 hover:bg-surface-sunken hover:text-ink-1'
-              )}
-            >
-              <img className="h-9 w-9 max-w-none object-contain" src={doormileMark} alt="" aria-hidden="true" />
-            </button>
+            {/* MileTruth. A header control rather than a route: shown on all pages except the home page */}
+            {!isHome && (
+              <button
+                type="button"
+                onClick={() => toggleAssistant((open) => !open)}
+                aria-label={assistantOpen ? 'Close MileTruth' : 'Open MileTruth'}
+                aria-expanded={assistantOpen}
+                className={cn(
+                  'grid h-8 w-8 place-items-center rounded-lg transition-colors cursor-pointer',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/50',
+                  assistantOpen ? 'bg-brand-tint text-brand' : 'text-ink-3 hover:bg-surface-sunken hover:text-ink-1'
+                )}
+              >
+                {/* 20px inside a 32px button.
+                    Was `h-9 w-9 max-w-none` — a 36px image in a 32px button,
+                    so the mark overflowed its own control by 2px on every
+                    side. Two visible consequences: it stood proud of the
+                    notification bell and avatar beside it, breaking the row's
+                    alignment, and it covered the button's own area completely,
+                    so the `hover:bg-surface-sunken` tint had nowhere to show —
+                    the control looked dead on hover while its neighbours lit
+                    up. Sized to sit inside the button, like the Bell's 16px
+                    icon does. */}
+                <img className="h-5 w-5 object-contain" src={doormileMark} alt="" aria-hidden="true" />
+              </button>
+            )}
 
             {!isClient && <NotificationsMenu />}
 
@@ -382,27 +447,40 @@ export default function AdminLayout() {
                 </button>
               </DropdownMenuTrigger>
 
-              <DropdownMenuContent align="end" className="w-60">
-                <DropdownMenuLabel className="font-normal">
-                  <p className="text-body-sm font-semibold text-ink-1">{displayName}</p>
-                  <p className="text-caption text-ink-3">{user?.email || user?.primaryemail}</p>
-                  <Badge variant="soft" size="sm" className="mt-1.5">
-                    {user?.role || 'Administrator'}
+              <DropdownMenuContent align="end" className="w-64 p-1.5 rounded-2xl shadow-xl border-slate-200">
+                <DropdownMenuLabel className="font-normal px-2.5 py-2">
+                  <p className="text-body-sm font-bold text-ink-1">{displayName}</p>
+                  <p className="text-caption text-ink-3 truncate">{user?.email || user?.primaryemail || 'admin@doormile.com'}</p>
+                  <Badge variant="soft" size="sm" className="mt-1.5 bg-rose-50 text-rose-700 font-semibold border-rose-200">
+                    {user?.role || 'admin'}
                   </Badge>
                 </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => navigate('/doormile/profile')} className="cursor-pointer">
-                  <User className="mr-2 h-4 w-4" /> Profile
+                <DropdownMenuSeparator className="my-1" />
+                <DropdownMenuItem onClick={() => navigate('/doormile/profile')} className="cursor-pointer rounded-xl px-2.5 py-2 font-medium">
+                  <User className="mr-2.5 h-4 w-4 text-slate-500" /> Profile
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/doormile/profile#security')} className="cursor-pointer">
-                  <Shield className="mr-2 h-4 w-4" /> Change password
+                <DropdownMenuItem onClick={() => navigate('/doormile/profile#security')} className="cursor-pointer rounded-xl px-2.5 py-2 font-medium">
+                  <Shield className="mr-2.5 h-4 w-4 text-slate-500" /> Change password
                 </DropdownMenuItem>
-                <DropdownMenuSeparator />
+                <DropdownMenuSeparator className="my-1" />
+                <div className="px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
+                  <Settings className="w-3 h-3 text-slate-400" /> Settings
+                </div>
+                {SETTINGS_NAV.map((item) => (
+                  <DropdownMenuItem
+                    key={item.path}
+                    onClick={() => navigate(item.path)}
+                    className="cursor-pointer rounded-xl px-2.5 py-2 font-medium"
+                  >
+                    <item.icon className="mr-2.5 h-4 w-4 text-slate-500" /> {item.label}
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator className="my-1" />
                 <DropdownMenuItem
                   onClick={() => logout()}
-                  className="cursor-pointer text-destructive focus:text-destructive"
+                  className="cursor-pointer text-destructive focus:text-destructive rounded-xl px-2.5 py-2 font-medium"
                 >
-                  <LogOut className="mr-2 h-4 w-4" /> Sign out
+                  <LogOut className="mr-2.5 h-4 w-4" /> Sign out
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -441,6 +519,26 @@ export default function AdminLayout() {
                 {item.label}
               </Link>
             ))}
+            {/* Settings — the pair that lives in the account menu on desktop.
+                Without this block they existed on the bar's dropdown only, so
+                a phone could not reach Pricing or Customers at all. */}
+            <div className="my-2 h-px bg-border" />
+            <div className="px-3 pb-1 text-[10px] font-bold uppercase tracking-wider text-ink-3">
+              Settings
+            </div>
+            {SETTINGS_NAV.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setMenuOpen(false)}
+                className={cn(
+                  'rounded-lg px-3 py-2.5 text-body-sm font-medium transition-colors',
+                  isActive(item.path) ? 'bg-brand-tint text-brand' : 'text-ink-2 hover:bg-surface-sunken'
+                )}
+              >
+                {item.label}
+              </Link>
+            ))}
             <div className="my-2 h-px bg-border" />
             <Link
               to="/doormile/profile"
@@ -456,13 +554,16 @@ export default function AdminLayout() {
       {/* `dai-page` is the handshake with the assistant dock: while the panel
           is open, DoormileAI.css reserves exactly its width of padding here so
           the page slides open beside it instead of being covered. */}
-      <div className={cn("dai-page flex flex-col", !location.pathname.startsWith('/doormile/dispatch') && "px-4 md:flex-row lg:px-6")}>
-        <main className={cn("min-w-0 flex-1", !location.pathname.startsWith('/doormile/dispatch') && "py-6")}>
+      <div className={cn("dai-page flex flex-col flex-1", !location.pathname.startsWith('/doormile/dispatch') && "px-4 md:flex-row lg:px-6")}>
+        <main className={cn(
+          "min-w-0 flex-1 flex flex-col",
+          !location.pathname.startsWith('/doormile/dispatch') && location.pathname !== '/doormile/home' && location.pathname !== '/doormile' && "py-6"
+        )}>
           <Outlet />
         </main>
       </div>
 
-      {assistantOpen && <AIPanel isOpen={assistantOpen} onClose={() => setAssistantOpen(false)} />}
+      {!isHome && <AIPanel isOpen={assistantOpen} onClose={() => toggleAssistant(false)} />}
     </div>
   );
 }
diff --git a/src/lib/assistant/CLAUDE.md b/src/lib/assistant/CLAUDE.md
index 390062d..7e7e883 100644
--- a/src/lib/assistant/CLAUDE.md
+++ b/src/lib/assistant/CLAUDE.md
@@ -6,21 +6,25 @@ Rules for editing **Doormile AI** — the Operations Copilot (`intents.js`, `Doo
 
 ## 1. What this is
 
-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 **Doormile AI**, subtitle **Operations Copilot**. Not a standalone page: it lives as a **right-side slide-over** opened from a header icon.
+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/layout/MainLayout/AppTopNav.js` — a single `<DoormileAITrigger />`. There is **no route and no sidebar entry** for this feature — don't add one back. If you're tempted to give it a full page, re-read §2 first; that was tried and deliberately reverted.
+- **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%.
+  - **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.
 - **`DoormileAI/`** — all UI:
   - `index.js` — the trigger button; owns open/closed state and returns focus to itself on close.
-  - `AIPanel.js` — the portal, scrim, slide-over, focus/Escape handling, message state, history persistence, and the ask() flow.
-  - `AIWelcome.js` — greeting + suggestion cards (empty-thread state only).
+  - `AIPanel.js` — the portal, slide-over, focus/Escape handling, message state, history persistence, 4 clean action icons (History, Reset, Expand, Close), and the ask() flow.
+  - `AIWelcome.js` — greeting + suggestion pill chips (empty-thread state only).
   - `AIMessage.js` — one turn. User turns are bubbles; assistant turns deliberately are NOT.
-  - `AIComposer.js` — auto-growing textarea, Enter to send, Shift+Enter for newline.
+  - `AIComposer.js` — clean horizontal capsule pill container with textarea, mic, and `<LuSend />` button.
   - `AIFlowStep.js` — one dropdown turn of a conversational create (§3.5).
   - `AIBulkOrderForm.js` — the one create that stays a form (CSV paste).
-  - `AIParts.js` — Spark / LiveIndicator / TypingIndicator / Metric / StatGrid / StateBlock.
+  - `AIParts.js` — Spark / TypingIndicator / Metric / StatGrid / StateBlock.
   - `pageContext.js` — route → context label + suggested questions.
-- **`DoormileAI.css`** — the panel's stylesheet (same convention as `OrdersRedesign.css`).
+- **`DoormileAI.css`** — the panel's stylesheet. Defines inset card geometry (`border-radius: 20px`, elevated shadow, floating margins off top/bottom/right edges on desktop).
+- **`Home.jsx` Composer**: Prompt bar features a functional **Send** button (`Send` icon + "Send") replacing the previous Speak button. Top navigation bar features the Doormile red "D" mark.
 
 ### UI rules that are load-bearing, not cosmetic
 
diff --git a/src/lib/assistant/DoormileAI.css b/src/lib/assistant/DoormileAI.css
index 36d46f3..b1be3a6 100644
--- a/src/lib/assistant/DoormileAI.css
+++ b/src/lib/assistant/DoormileAI.css
@@ -39,7 +39,7 @@
   /* Default = the NORMAL step. AIPanel overwrites this property on the
      document element when the operator toggles the width, so the panel and
      the page's reserved strip always read the same value. */
-  --dai-dock-width: max(300px, 25vw);
+  --dai-dock-width: max(340px, 30vw);
   --dai-duration: 240ms;
   --dai-ease: cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -119,22 +119,22 @@
    seam has depth without the panel detaching. */
 .dai-panel {
   position: fixed;
-  /* Set from JS by AIPanel — Astryx does not publish a header-height token,
-     despite --appshell-header-height looking like one. */
-  top: var(--dai-dock-top, 57px);
-  right: 0;
-  bottom: 0;
+  /* Inset card geometry matching the reference design:
+     Floating cleanly off the top nav, bottom edge, and right edge with rounded corners. */
+  top: calc(var(--dai-dock-top, 57px) + 14px);
+  right: 16px;
+  bottom: 14px;
   z-index: 1200;
-  width: var(--dai-dock-width);
+  width: calc(var(--dai-dock-width) - 24px);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  background: var(--dai-surface);
-  border-left: 1px solid var(--dai-border);
-  border-radius: 0;
-  box-shadow: -6px 0 20px rgba(15, 23, 42, 0.05);
-  transform: translateX(100%);
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
+  transform: translateX(calc(100% + 32px));
   visibility: hidden;
   transition:
     transform var(--dai-duration) var(--dai-ease),
@@ -157,11 +157,15 @@
    The transition sits on the container unconditionally so the page slides back
    when the panel closes too — a rule that only exists while `.dai-docked` is
    applied cannot animate its own removal. */
+.dai-page,
 .astryx-layout-content {
   transition: padding-right var(--dai-duration) var(--dai-ease);
 }
+body.dai-docked .dai-page,
 body.dai-docked .astryx-layout-content {
-  padding-right: var(--dai-dock-width);
+  /* Reserves the dock width plus a generous 20px gutter so the page content
+     (tables, cards) never collides with the sidebar and stays distinct. */
+  padding-right: calc(var(--dai-dock-width) + 16px);
 }
 
 /* ---- Mobile: there is no 30% worth having -------------------------------
@@ -171,10 +175,14 @@ body.dai-docked .astryx-layout-content {
 @media (max-width: 900px) {
   .dai-panel {
     top: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     z-index: 1301;
-    border-left: none;
+    border: none;
+    border-radius: 0;
     box-shadow: var(--dai-shadow);
+    transform: translateX(100%);
   }
   .dai-scrim {
     display: block;
@@ -182,6 +190,7 @@ body.dai-docked .astryx-layout-content {
   .dai-scrim[data-open='true'] {
     opacity: 1;
   }
+  body.dai-docked .dai-page,
   body.dai-docked .astryx-layout-content {
     padding-right: 0;
   }
@@ -194,20 +203,22 @@ body.dai-docked .astryx-layout-content {
    -------------------------------------------------------------------------- */
 .dai-root .dai-header {
   flex: 0 0 auto;
-  padding: 14px 12px 12px 14px;
-  border-bottom: 1px solid var(--dai-border);
+  padding: 14px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  background: #ffffff;
 }
 .dai-root .dai-title {
-  font-size: 15px;
-  font-weight: 650;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
-  color: var(--dai-text);
+  color: #0f172a;
 }
 .dai-root .dai-subtitle {
   font-size: 12px;
   line-height: 1.3;
-  color: var(--dai-text-muted);
+  color: #64748b;
+  font-weight: 500;
 }
 /* The AI mark. A soft gradient orb — not a robot face. */
 .dai-root .dai-spark {
@@ -215,8 +226,9 @@ body.dai-docked .astryx-layout-content {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  border-radius: 999px;
-  background: var(--dai-surface);
+  border-radius: 10px;
+  background: #fff1f2;
+  border: 1px solid #ffe4e6;
   overflow: hidden;
 }
 /* The mark's own canvas is only 66.8% content — a third of every edge is
@@ -277,15 +289,7 @@ body.dai-docked .astryx-layout-content {
 }
 /* Page-context strip — "Orders · Today · All locations" */
 .dai-root .dai-context {
-  flex: 0 0 auto;
-  padding: 7px 14px;
-  font-size: 11.5px;
-  color: var(--dai-text-muted);
-  background: var(--dai-surface-alt);
-  border-bottom: 1px solid var(--dai-border);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: none;
 }
 /* --------------------------------------------------------------------------
    Welcome state
@@ -360,58 +364,57 @@ body.dai-docked .astryx-layout-content {
    They wrap, they never scroll. A horizontal scroller can always leave a chip
    half-visible at the edge, and a half-visible button is a bug no amount of
    fade masking fixes. */
+.dai-root .dai-suggestions-bar .dai-section-label {
+  display: none;
+}
 .dai-root .dai-suggestions {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
 }
 
 .dai-suggestion {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   max-width: 100%;
-  padding: 5px 10px;
+  padding: 8px 18px;
   text-align: left;
   font: inherit;
-  font-size: 12px;
-  line-height: 1.35;
+  font-size: 13px;
+  line-height: 1.4;
   font-weight: 500;
-  color: var(--dai-text);
-  background: var(--dai-surface);
-  border: 1px solid var(--dai-border);
-  /* 14px, pinned — NOT 999px.
-     
-     On a one-line chip a fully round radius already resolves to about 14px, so
-     these look identical. The difference shows on a chip whose question wraps
-     to two lines: 999px would resolve to half of ~46px and the chip stops
-     reading as a chip and starts reading as a card, so one long suggestion
-     would look like a different component from the nineteen beside it. */
-  border-radius: 14px;
+  color: #334155;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 9999px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
   cursor: pointer;
-  transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    color 140ms ease,
-    transform 140ms ease;
+  transition: all 140ms ease;
 }
 .dai-suggestion:hover {
-  background: var(--dai-surface-alt);
-  border-color: var(--dai-border-strong);
+  background: #f8fafc;
+  border-color: #cbd5e1;
+  color: #0f172a;
   transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
 }
 .dai-suggestion:active {
   transform: translateY(0);
 }
 .dai-suggestion:focus-visible {
-  outline: 2px solid var(--dai-accent);
+  outline: 2px solid #0f172a;
   outline-offset: 2px;
 }
 .dai-root .dai-suggestion-icon {
   flex: 0 0 auto;
-  color: var(--dai-text-muted);
+  color: #64748b;
   transition: color 140ms ease;
 }
 .dai-suggestion:hover .dai-suggestion-icon {
-  color: var(--dai-text-secondary);
+  color: #0f172a;
 }
 .dai-root .dai-suggestion-text {
   min-width: 0;
@@ -695,26 +698,29 @@ body.dai-docked .astryx-layout-content {
    -------------------------------------------------------------------------- */
 .dai-root .dai-composer-wrap {
   flex: 0 0 auto;
-  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
-  border-top: 1px solid var(--dai-border);
-  background: var(--dai-surface);
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid #f1f5f9;
+  background: #ffffff;
 }
 .dai-root .dai-composer {
-  border: 1px solid var(--dai-border-strong);
-  /* 14px, the same corner the suggestion chips use. At 5px the input was the
-     one sharp-cornered thing in a panel of rounded surfaces, and it sat
-     directly beneath the chips where the mismatch was most visible. */
-  border-radius: 14px;
-  background: var(--dai-surface);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-  padding: 10px 10px 8px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 9999px;
+  background: #f8fafc;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+  padding: 6px 6px 6px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
   transition:
     border-color 140ms ease,
-    box-shadow 140ms ease;
+    box-shadow 140ms ease,
+    background-color 140ms ease;
 }
 .dai-root .dai-composer[data-focused='true'] {
-  border-color: var(--dai-accent);
-  box-shadow: 0 0 0 3px var(--dai-accent-ring);
+  background: #ffffff;
+  border-color: #cbd5e1;
+  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
 }
 
 /* --------------------------------------------------------------------------
@@ -811,13 +817,13 @@ body.dai-docked .astryx-layout-content {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: var(--dai-accent);
-  color: var(--dai-accent-contrast);
+  background: #2563eb;
+  color: #ffffff;
   cursor: pointer;
   transition:
     background-color 140ms ease,
@@ -825,29 +831,32 @@ body.dai-docked .astryx-layout-content {
     transform 140ms ease;
 }
 .dai-root .dai-send:hover:not(:disabled) {
-  opacity: 0.86;
+  background: #1d4ed8;
+  transform: scale(1.05);
 }
 .dai-root .dai-send:active:not(:disabled) {
-  transform: scale(0.94);
+  transform: scale(0.96);
 }
 .dai-root .dai-send:focus-visible {
-  outline: 2px solid var(--dai-accent);
+  outline: 2px solid #2563eb;
   outline-offset: 2px;
 }
 /* Disabled is the resting state until something is typed, so it has to read as
    "not yet", not as "broken" — a filled grey circle, same shape and weight. */
 .dai-root .dai-send:disabled {
-  background: var(--dai-surface-hover);
-  color: var(--dai-text-muted);
+  background: #f1f5f9;
+  color: #94a3b8;
   cursor: default;
 }
 .dai-root .dai-composer textarea {
   display: block;
+  flex: 1 1 auto;
   width: 100%;
+  min-width: 0;
   border: none;
   outline: none;
   resize: none;
-  padding: 0;
+  padding: 4px 0;
   margin: 0;
   font: inherit;
   font-size: 13.5px;
diff --git a/src/pages/doormile/bookings/Bookings.jsx b/src/pages/doormile/bookings/Bookings.jsx
index 1e7f5f4..79097d7 100644
--- a/src/pages/doormile/bookings/Bookings.jsx
+++ b/src/pages/doormile/bookings/Bookings.jsx
@@ -372,8 +372,10 @@ export default function Bookings() {
       {
         key: 'route',
         header: 'Route',
+        width: '260px',
+        className: 'max-w-[260px]',
         accessor: (row) => (
-          <div className="max-w-xs">
+          <div className="max-w-[260px] min-w-0 overflow-hidden">
             <p className="truncate text-body-sm text-ink-2" title={row.pickupaddress || ''}>
               {orDash(row.pickupaddress)}
             </p>
@@ -385,7 +387,8 @@ export default function Bookings() {
       },
       {
         key: 'rider',
-        header: 'Rider',
+        header: 'Miler',
+        width: '140px',
         hideBelow: 'md',
         accessor: (row) => {
           const riderId = String(row.assignedmileruserid || row.mileruserid || '');
@@ -394,7 +397,7 @@ export default function Bookings() {
             return <span className="text-body-sm font-medium text-ink-1">{name}</span>;
           }
           if (riderId) {
-            return <span className="text-caption text-ink-2">Rider #{riderId}</span>;
+            return <span className="text-caption text-ink-2">Miler #{riderId}</span>;
           }
           return <span className="text-caption text-ink-4">Unassigned</span>;
         },
diff --git a/src/pages/doormile/deliveries/Deliveries.jsx b/src/pages/doormile/deliveries/Deliveries.jsx
index 7050302..0a8ed4c 100644
--- a/src/pages/doormile/deliveries/Deliveries.jsx
+++ b/src/pages/doormile/deliveries/Deliveries.jsx
@@ -213,6 +213,7 @@ export default function Deliveries() {
         key: 'orderid',
         header: 'Order & client',
         sortable: true,
+        width: '130px',
         cell: (row) => (
           <div className="min-w-0">
             <p className="truncate text-body-sm font-semibold text-ink-1">{orDash(row.orderid)}</p>
@@ -223,9 +224,11 @@ export default function Deliveries() {
       {
         key: 'route',
         header: 'Route (pickup → drop)',
+        width: '260px',
+        className: 'max-w-[260px]',
         sortValue: (row) => row.pickupaddress || '',
         cell: (row) => (
-          <div className="min-w-0">
+          <div className="max-w-[260px] min-w-0 overflow-hidden">
             <p className="truncate text-body-sm text-ink-2" title={row.pickupaddress || ''}>
               <span className="font-medium text-ink-1">Pickup</span>
               {row.pickupaddress ? ` · ${row.pickupaddress}` : ' · —'}
@@ -239,17 +242,18 @@ export default function Deliveries() {
       },
       {
         key: 'ridername',
-        header: 'Rider',
+        header: 'Miler',
         sortable: true,
+        width: '140px',
         cell: (row) => {
           const riderKey = String(row.userid || row.milerprofileid || '');
           const info = riderLookup.get(riderKey);
           const name =
-            (info?.name && !info.name.startsWith('Rider #'))
+            (info?.name && !info.name.startsWith('Miler #') && !info.name.startsWith('Rider #'))
               ? info.name
-              : (row.ridername && !row.ridername.startsWith('Rider #'))
+              : (row.ridername && !row.ridername.startsWith('Miler #') && !row.ridername.startsWith('Rider #'))
                 ? row.ridername
-                : (info?.name || row.ridername || (row.userid ? `Rider #${row.userid}` : '—'));
+                : (info?.name || row.ridername || (row.userid ? `Miler #${row.userid}` : '—'));
           const contact = info?.phone || row.ridercontact;
 
           return (
@@ -264,6 +268,7 @@ export default function Deliveries() {
       {
         key: 'eta',
         header: 'ETA & distance',
+        width: '120px',
         sortValue: (row) => row.expecteddeliverytime || '',
         cell: (row) => (
           <div className="min-w-0">
@@ -279,6 +284,7 @@ export default function Deliveries() {
         key: 'deliverycharges',
         header: 'Amount',
         align: 'right',
+        width: '85px',
         sortValue: (row) => Number(row.deliverycharges) || 0,
         accessor: (row) => currency(row.deliverycharges),
         hideBelow: 'lg',
@@ -286,6 +292,7 @@ export default function Deliveries() {
       {
         key: 'orderstatus',
         header: 'Status',
+        width: '120px',
         sortable: true,
         cell: (row) => (
           <div className="flex flex-col items-start gap-0.5">
@@ -300,6 +307,7 @@ export default function Deliveries() {
         key: 'actions',
         header: 'Actions',
         align: 'right',
+        width: '130px',
         cell: (row) => (
           <div className="flex justify-end gap-1">
             <IconButton
@@ -328,7 +336,7 @@ export default function Deliveries() {
 
             {['pending', 'accepted', 'arrived'].includes(row.orderstatus) ? (
               <IconButton
-                label="Change rider"
+                label="Change miler"
                 icon={Bike}
                 variant="ghost"
                 size="sm"
@@ -373,7 +381,7 @@ export default function Deliveries() {
     { key: 'orderid', header: 'Order' },
     { key: 'tenantname', header: 'Client' },
     { key: 'deliverycustomer', header: 'Customer' },
-    { key: 'ridername', header: 'Rider' },
+    { key: 'ridername', header: 'Miler' },
     { key: 'orderstatus', header: 'Status' },
     { key: 'kms', header: 'Km' },
     { key: 'deliverycharges', header: 'Amount' },
@@ -398,24 +406,24 @@ export default function Deliveries() {
         actions={
           <DatePicker
             value={selectedDate}
-            onChange={setSelectedDate}
-            allowAll
+            onChange={(d) => {
+              if (d) {
+                const s = dayjs(d).format('YYYY-MM-DD');
+                setDateParams({ from: s, to: s });
+                setSelectedDate(s);
+              }
+            }}
           />
         }
       />
 
       <Stack space="sm">
-        {/* Eight status tabs are far wider than a phone. Scrolled in their own
-            track so the strip moves instead of the whole document — see
-            Orders.jsx for the same fix. */}
-        <div className="-mx-1 max-w-full overflow-x-auto px-1 py-0.5">
-          <Tabs tabs={tabs} value={tab} onChange={setTab} className="shrink-0" />
-        </div>
+        <Tabs tabs={tabs} value={tab} onChange={setTab} />
 
         <ListToolbar
           search={search}
           onSearchChange={setSearch}
-          placeholder="Search by order, customer, rider or address"
+          placeholder="Search by order, client, miler, customer or address"
           count={{ shown: rows.length, total: batchRows.length, noun: 'deliveries' }}
           actions={
             <Button
@@ -457,10 +465,10 @@ export default function Deliveries() {
 
           <Select value={riderId} onValueChange={setRiderId}>
             <SelectTrigger className="w-full sm:w-48">
-              <SelectValue placeholder="All riders" />
+              <SelectValue placeholder="All milers" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value={ALL}>All riders</SelectItem>
+              <SelectItem value={ALL}>All milers</SelectItem>
               {(riders || []).map((rider) => (
                 <SelectItem key={rider.userid} value={String(rider.userid)}>
                   {rider.label}
@@ -474,8 +482,8 @@ export default function Deliveries() {
           columns={columns}
           rows={rows}
           getRowId={(row) => row.orderheaderid}
-          loading={isLoading}
-          refreshing={isFetching && !isLoading}
+          loading={isLoading && !data}
+          refreshing={isFetching && Boolean(data)}
           pageSize={25}
           defaultSort={{ key: 'orderid', direction: 'desc' }}
           isFiltered={isFiltered}
@@ -486,29 +494,36 @@ export default function Deliveries() {
             setRiderId(ALL);
           }}
           emptyState={
-            isFiltered ? undefined : (
-              <EmptyState
-                icon={Package}
-                title="Nothing dispatched here"
-                description="A booking appears once it has a rider or has become a consignment."
-              />
-            )
+            <EmptyState
+              icon={Truck}
+              title={isFiltered ? 'No matching deliveries' : 'No deliveries found'}
+              description={
+                isFiltered
+                  ? 'Try clearing search or filters to see more orders.'
+                  : 'Dispatch orders from the Orders page to populate deliveries.'
+              }
+              action={
+                isFiltered
+                  ? {
+                      label: 'Clear filters',
+                      onClick: () => {
+                        setSearch('');
+                        setBatch('all');
+                        setTenantId(ALL);
+                        setRiderId(ALL);
+                      },
+                    }
+                  : undefined
+              }
+            />
           }
         />
-
-        {data?.nextPage ? (
-          <div className="flex justify-center">
-            <Button variant="outline" onClick={() => setPage(data.nextPage)} loading={isFetching}>
-              Load more
-            </Button>
-          </div>
-        ) : null}
       </Stack>
 
       <Modal
         open={Boolean(riderRow)}
         onOpenChange={(open) => !open && setRiderRow(null)}
-        title="Change rider"
+        title="Change miler"
         description={riderRow ? `Order ${riderRow.orderid}` : undefined}
         icon={Bike}
         busy={changeRider.isPending}
@@ -533,10 +548,10 @@ export default function Deliveries() {
           </>
         }
       >
-        <Field label="Rider">
+        <Field label="Miler">
           <Select value={selectedRider} onValueChange={setSelectedRider}>
             <SelectTrigger>
-              <SelectValue placeholder="Choose a rider" />
+              <SelectValue placeholder="Choose a miler" />
             </SelectTrigger>
             <SelectContent>
               {(riders || []).map((rider) => (
diff --git a/src/pages/doormile/dispatch/ActiveSection.jsx b/src/pages/doormile/dispatch/ActiveSection.jsx
index 7910cc2..224f264 100644
--- a/src/pages/doormile/dispatch/ActiveSection.jsx
+++ b/src/pages/doormile/dispatch/ActiveSection.jsx
@@ -224,11 +224,11 @@ const ActiveSection = ({
               </div>
             )}
 
-            {/* Rider & Telemetry Row */}
+            {/* Miler & Telemetry Row */}
             <div className="flex items-center justify-between mt-1 text-[11px] text-slate-600 bg-slate-50 px-2 py-1 rounded">
               <div className="flex items-center gap-1.5 truncate">
                 <span className="font-semibold text-slate-900 truncate">
-                  🛵 {o.rider_name || o.ridername || rider?.name || `Rider #${rid}`}
+                  🛵 {o.rider_name || o.ridername || rider?.name || `Miler #${rid}`}
                 </span>
                 {(rider?.battery != null || rider?.batterystatus != null) && (
                   <span className="text-[10px] text-emerald-700 bg-emerald-100/80 px-1 py-0.2 rounded font-medium">
@@ -238,12 +238,12 @@ const ActiveSection = ({
               </div>
               {(rider?.phone || o.riderphone || o.deliverycontactno) && (
                 <a
-                  href={`https://api.whatsapp.com/send?phone=${String(rider?.phone || o.riderphone || o.deliverycontactno).replace(/[^0-9]/g, '')}&text=${encodeURIComponent(`Hi ${o.rider_name || 'Rider'}, regarding Order #${o.orderid} to ${o.deliverycustomer || 'Customer'}`)}`}
+                  href={`https://api.whatsapp.com/send?phone=${String(rider?.phone || o.riderphone || o.deliverycontactno).replace(/[^0-9]/g, '')}&text=${encodeURIComponent(`Hi ${o.rider_name || 'Miler'}, regarding Order #${o.orderid} to ${o.deliverycustomer || 'Customer'}`)}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={(e) => e.stopPropagation()}
                   className="text-[10px] font-semibold text-emerald-700 hover:text-emerald-800 bg-emerald-50 hover:bg-emerald-100 px-1.5 py-0.5 rounded transition-colors flex items-center gap-1 shrink-0 ml-1"
-                  title="Chat with rider on WhatsApp"
+                  title="Chat with miler on WhatsApp"
                 >
                   💬 WhatsApp
                 </a>
diff --git a/src/pages/doormile/dispatch/Dispatch.jsx b/src/pages/doormile/dispatch/Dispatch.jsx
index 6914de5..9022c02 100644
--- a/src/pages/doormile/dispatch/Dispatch.jsx
+++ b/src/pages/doormile/dispatch/Dispatch.jsx
@@ -3927,7 +3927,7 @@ const Dispatch = ({
             <button
               className={`sbt ${viewMode === 'riders' ? 'active' : ''}`}
               onClick={() => {
-                logger.info('View mode changed: By Rider');
+                logger.info('View mode changed: By Miler');
                 setViewMode('riders');
                 handleRiderFocus(null);
                 setFocusedKitchen(null);
@@ -3937,7 +3937,7 @@ const Dispatch = ({
               <span className="sbt-icon">
                 <MdDirectionsBike />
               </span>{' '}
-              By Rider
+              By Miler
             </button>
             {!embedded && (
               <button
@@ -3982,12 +3982,12 @@ const Dispatch = ({
                 setFocusedKitchen(null);
                 setFocusedZone(null);
               }}
-              title="Live GPS / battery / status snapshot for a rider"
+              title="Live GPS / battery / status snapshot for a miler"
             >
               <span className="sbt-icon">
                 <MdInfoOutline />
               </span>{' '}
-              Rider Info
+              Miler Info
             </button>
           </div>
 
@@ -4004,9 +4004,9 @@ const Dispatch = ({
             <div className="rider-info-mode">
               <div className="ri-sidebar">
                 <div className="ri-sb-head">
-                  <div className="ri-sb-title">Riders</div>
+                  <div className="ri-sb-title">Milers</div>
                   <div className="ri-sb-sub">
-                    {ridersAllDay.length} {ridersAllDay.length === 1 ? 'rider' : 'riders'} today
+                    {ridersAllDay.length} {ridersAllDay.length === 1 ? 'miler' : 'milers'} today
                   </div>
                 </div>
                 <div className="ri-search">
@@ -4032,7 +4032,7 @@ const Dispatch = ({
                   if (matched.length === 0) {
                     return (
                       <div className="ri-empty">
-                        {riderInfoSearch ? `No riders match "${riderInfoSearch}"` : 'No riders have orders today'}
+                        {riderInfoSearch ? `No milers match "${riderInfoSearch}"` : 'No milers have orders today'}
                       </div>
                     );
                   }
@@ -4067,16 +4067,16 @@ const Dispatch = ({
                     <div className="ri-placeholder-icon">
                       <MdInfoOutline />
                     </div>
-                    <div className="ri-placeholder-title">Pick a rider</div>
+                    <div className="ri-placeholder-title">Pick a miler</div>
                     <div className="ri-placeholder-sub">
-                      Select a rider from the list on the left to see their live GPS, battery, connection, and current order snapshot.
+                      Select a miler from the list on the left to see their live GPS, battery, connection, and current order snapshot.
                     </div>
                   </div>
                 ) : (
                   <>
-                    {riderInfoFetching && !riderInfoData && <div className="ri-loading">Loading rider snapshot…</div>}
+                    {riderInfoFetching && !riderInfoData && <div className="ri-loading">Loading miler snapshot…</div>}
 
-                    {riderInfoIsError && <div className="ri-error">Couldn’t load this rider’s log. {riderInfoError?.message || ''}</div>}
+                    {riderInfoIsError && <div className="ri-error">Couldn’t load this miler’s log. {riderInfoError?.message || ''}</div>}
 
                     {riderInfoData &&
                       (() => {
@@ -4091,7 +4091,7 @@ const Dispatch = ({
                         return (
                           <div className="ri-snapshot">
                             <div className="ri-snap-head">
-                              <div className="ri-snap-name">{d.username || `Rider #${d.userid}`}</div>
+                              <div className="ri-snap-name">{d.username || `Miler #${d.userid}`}</div>
                               <div className="ri-snap-meta">
                                 <span>#{d.userid}</span>
                                 {d.status && <span className={`ri-status ri-status-${statusKey}`}>{d.status}</span>}
@@ -4222,7 +4222,7 @@ const Dispatch = ({
                                         {riderInfoArea?.area || 'Locating area…'}
                                       </Tooltip>
                                       <Popup>
-                                        <div style={{ fontWeight: 700, marginBottom: 2 }}>{d.username || `Rider #${d.userid}`}</div>
+                                        <div style={{ fontWeight: 700, marginBottom: 2 }}>{d.username || `Miler #${d.userid}`}</div>
                                         {riderInfoArea?.area && (
                                           <div style={{ fontSize: 12, color: '#0f172a', marginBottom: 4 }}>{riderInfoArea.area}</div>
                                         )}
@@ -4276,7 +4276,7 @@ const Dispatch = ({
                   <div className="sb-header">
                     <div className="sb-header-top">
                       <div className="sb-header-title">
-                        <span className="sb-title-text">RIDER DISPATCH</span>
+                        <span className="sb-title-text">MILER DISPATCH</span>
                       </div>
                       <span className="sb-header-scope" title={activeStats.label}>
                         <span className="sb-scope-dot" />
@@ -4300,7 +4300,7 @@ const Dispatch = ({
                         </span>
                         <div className="sb-tile-body">
                           <div className="sb-tile-value">{activeStats.riders}</div>
-                          <div className="sb-tile-label">{activeStats.riders === 1 ? 'Rider' : 'Riders'}</div>
+                          <div className="sb-tile-label">{activeStats.riders === 1 ? 'Miler' : 'Milers'}</div>
                         </div>
                       </div>
                     </div>
@@ -4589,7 +4589,7 @@ const Dispatch = ({
                                                 <button
                                                   type="button"
                                                   className="zone-order-change-rider"
-                                                  title="Change rider"
+                                                  title="Change miler"
                                                   onClick={(e) => {
                                                     e.stopPropagation();
                                                     onChangeRider(o, focusedRider);
@@ -4687,7 +4687,7 @@ const Dispatch = ({
                             <Ico>
                               <MdTwoWheeler />
                             </Ico>
-                            {focusedKitchen.riders.size} riders
+                            {focusedKitchen.riders.size} {focusedKitchen.riders.size === 1 ? 'miler' : 'milers'}
                           </span>
                         </div>
                         {/* Render the kitchen's orders with the same zone-order-card layout
@@ -4795,7 +4795,7 @@ const Dispatch = ({
                                         <button
                                           type="button"
                                           className="zone-order-change-rider"
-                                          title="Change rider"
+                                          title="Change miler"
                                           onClick={(e) => {
                                             e.stopPropagation();
                                             handleTriggerChangeRider(o, riderForOrder);
@@ -5075,8 +5075,8 @@ const Dispatch = ({
                           : viewMode === 'kitchens'
                             ? 'Kitchen dispatch'
                             : isAllActiveView
-                              ? 'Active rider dispatch'
-                              : 'Rider dispatch'}
+                              ? 'Active miler dispatch'
+                              : 'Miler dispatch'}
                       </div>
                     )}
                     <div id="rider-cards">
@@ -5219,7 +5219,7 @@ const Dispatch = ({
                               <div className="rcard-info">
                                 <div className="rcard-name">{k.kitchenName}</div>
                                 <div className="rcard-zone">
-                                  {k.riders.size} riders ·{' '}
+                                  {k.riders.size} {k.riders.size === 1 ? 'miler' : 'milers'} ·{' '}
                                   <Ico>
                                     <MdAccountBalanceWallet />
                                   </Ico>
@@ -5243,7 +5243,7 @@ const Dispatch = ({
                                 </Ico>
                                 {k.orders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0).toFixed(1)} km
                               </span>
-                              <span>{k.riders.size} riders</span>
+                              <span>{k.riders.size} {k.riders.size === 1 ? 'miler' : 'milers'}</span>
                             </div>
                             <div className="step-ids">
                               {Array.from(k.riders)
diff --git a/src/pages/doormile/dispatch/ProfitabilitySection.jsx b/src/pages/doormile/dispatch/ProfitabilitySection.jsx
index cd30dbd..25972e1 100644
--- a/src/pages/doormile/dispatch/ProfitabilitySection.jsx
+++ b/src/pages/doormile/dispatch/ProfitabilitySection.jsx
@@ -169,7 +169,7 @@ function OrdersBreakdownTable({ orders, getRevenue }) {
       <div className="p-6 text-center bg-slate-50 rounded-lg border border-slate-100">
         <Receipt className="w-6 h-6 text-slate-400 mx-auto mb-1.5" />
         <p className="text-xs font-semibold text-slate-700">No orders yet</p>
-        <p className="text-[11px] text-slate-500">No orders assigned to this rider yet.</p>
+        <p className="text-[11px] text-slate-500">No orders assigned to this miler yet.</p>
       </div>
     );
   }
@@ -404,7 +404,7 @@ export default function ProfitabilitySection({
       color: moneyColor(dailyIsProfit)
     },
     {
-      title: 'Riders active',
+      title: 'Milers active',
       value: String(activeEnriched.length),
       icon: <Users className="w-4 h-4" />,
       color: STATUS.info
@@ -442,7 +442,7 @@ export default function ProfitabilitySection({
         <div>
           <h2 className="text-base font-bold text-slate-900 tracking-tight">Profitability overview</h2>
           <p className="text-xs text-slate-500 font-medium mt-0.5">
-            {activeEnriched.length} rider{activeEnriched.length !== 1 ? 's' : ''} · {profitCount} profitable · {lossCount} at loss
+            {activeEnriched.length} miler{activeEnriched.length !== 1 ? 's' : ''} · {profitCount} profitable · {lossCount} at loss
           </p>
         </div>
       </div>
@@ -473,14 +473,14 @@ export default function ProfitabilitySection({
         ))}
       </div>
 
-      {/* Riders List */}
+      {/* Milers List */}
       <div className="space-y-3">
-        <h3 className="text-xs font-bold uppercase tracking-wider text-slate-800">Riders list</h3>
+        <h3 className="text-xs font-bold uppercase tracking-wider text-slate-800">Milers list</h3>
         {sorted.length === 0 ? (
           <div className="flex flex-col items-center justify-center p-12 bg-white rounded-xl border border-slate-200 text-center shadow-xs">
             <Users className="w-8 h-8 text-slate-300 mb-2" />
-            <p className="text-sm font-semibold text-slate-800">No riders to show</p>
-            <p className="text-xs text-slate-500 mt-1">No riders have orders in this slot.</p>
+            <p className="text-sm font-semibold text-slate-800">No milers to show</p>
+            <p className="text-xs text-slate-500 mt-1">No milers have orders in this slot.</p>
           </div>
         ) : (
           <div className="space-y-2.5">
diff --git a/src/pages/doormile/home/Home.jsx b/src/pages/doormile/home/Home.jsx
new file mode 100644
index 0000000..5347473
--- /dev/null
+++ b/src/pages/doormile/home/Home.jsx
@@ -0,0 +1,2028 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import dayjs from 'dayjs';
+import {
+  ArrowRight,
+  Building2,
+  Calendar,
+  ChevronDown,
+  Clock,
+  Coins,
+  Copy,
+  FileSpreadsheet,
+  FileText,
+  GitFork,
+  History,
+  ListTodo,
+  Mic,
+  Package,
+  Plus,
+  RotateCcw,
+  Send,
+  Shield,
+  Sparkles,
+  Table,
+  Upload,
+  Users,
+  Volume2,
+  VolumeX,
+  X
+} from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { DOORMILE_WORDMARK_URL } from '@/assets/brand';
+import { cn } from '@/lib/utils';
+import { OpenToast } from '@/components/third-party/OpenToast';
+import { answerQuestion, EXAMPLE_QUESTIONS, FOLLOW_UP_SUGGESTIONS } from '@/lib/assistant/intents';
+import { executeCreateCustomer, buildCustomerPayload } from '@/lib/assistant/actions';
+import { executeCreateOrder, buildOrderPayload, validateOrderDraft } from '@/lib/assistant/orderActions';
+import { executeCreateBulk } from '@/lib/assistant/bulkOrderActions';
+import { startCustomerFlow, answerStep } from '@/lib/assistant/customerFlow';
+import { startOrderFlow, answerOrderStep } from '@/lib/assistant/orderFlow';
+import { startBulkFlow, answerBulkStep } from '@/lib/assistant/bulkFlow';
+import { startAssignFlow, answerAssignStep } from '@/lib/assistant/assignFlow';
+import { executeAssign, executeRepeatAssign, describeRider } from '@/lib/assistant/assignActions';
+import { startRepeatFlow, answerRepeatStep } from '@/lib/assistant/repeatFlow';
+import { buildRepeatRun, describeDay, findRecentRuns } from '@/lib/assistant/repeatRuns';
+
+const LOGO_FILTER = {
+  filter: 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)',
+};
+
+const MILETRUTH_SUGGESTIONS = [
+  "Repeat yesterday's orders",
+  'Create a new order',
+  'How many orders today?',
+  'How many riders are active?',
+  'Current hub status',
+  'Total revenue today',
+  'Which orders are delayed?',
+  'How many vehicles are available?',
+  'Orders today vs yesterday',
+  'How many consignments do we have?'
+];
+
+/**
+ * Turns one assistant answer into the flow diagram and breakdown table this
+ * page renders beside it.
+ *
+ * ── Derived only. Nothing invented. ──
+ *
+ * This function used to keyword-match the operator's prompt and return
+ * hardcoded figures for whole topics — revenue as a flat ₹48,650, a workforce
+ * of 46 with 38 active, six named hubs, four booking numbers, a vehicle mix of
+ * 14/6/4 — ignoring the real `res` it had been handed. The branches sat ABOVE
+ * the one that reads `res.stats`, so for those topics the correct code was
+ * unreachable: asking about revenue could not produce the real number, because
+ * a literal answered first.
+ *
+ * Two of those were worse than wrong figures. The default branch returned a
+ * staffing table for ANY unmatched question, so an unrelated query came back
+ * with a confident chart about riders. And the caller's no-answer path built a
+ * `sourceCalls` entry claiming `/admin/milers` had been called, status
+ * `complete`, "46 milers scanned" — forging the provenance trail that exists
+ * precisely so an operator can check where a number came from. A fabricated
+ * figure is a bug; a fabricated citation defeats the mechanism for catching
+ * one.
+ *
+ * So: every branch now reads `res`, and when `res` carries nothing to draw
+ * this returns **null** rather than inventing something to fill the space. The
+ * caller renders the headline alone in that case, which is the honest outcome
+ * — "here is the answer, with no breakdown" — and matches what the sidebar
+ * assistant has always done.
+ *
+ * The one exception is the order-creation pipeline, kept because its labels
+ * are the STEPS of a form the operator is about to fill in ("Client / Tenant",
+ * "Pickup & Delivery", "Pricing & Slot"). Those are the product's own
+ * structure, not measurements of anything, so there is nothing to derive and
+ * nothing to get wrong.
+ */
+function deriveVisualData(res, userPrompt) {
+  const query = (userPrompt || '').toLowerCase();
+  const title = (res?.title || res?.headline || '').toLowerCase();
+
+  // Order creation — a form's steps, not data. See the note above.
+  if (
+    query.includes('create order') ||
+    query.includes('new order') ||
+    query.includes('single order') ||
+    query.includes('create a new order') ||
+    title.includes('create order')
+  ) {
+    return {
+      flow: {
+        title: 'Order Creation Pipeline',
+        root: { label: 'ORDER CREATOR', value: 'Draft' },
+        branches: [
+          { label: 'Client / Tenant', count: 'Selected', share: 'Step 1', color: 'emerald' },
+          { label: 'Pickup & Delivery', count: 'Pending Details', share: 'Step 2', color: 'amber' },
+          { label: 'Pricing & Slot', count: 'Auto Calculated', share: 'Step 3', color: 'emerald' }
+        ]
+      },
+      table: {
+        title: 'Order Intake Configuration',
+        headers: ['CONFIGURATION FIELD', 'INPUT / ACTION', 'REQUIREMENT'],
+        rows: [
+          { status: 'Client / Tenant Assignment', count: 'Select active client', share: 'Mandatory', dotColor: 'bg-emerald-500' },
+          { status: 'Pickup & Delivery Addresses', count: 'Geocoded Coordinates', share: 'Mandatory', dotColor: 'bg-emerald-500' },
+          { status: 'Pricing Matrix & Time Slot', count: 'Dynamic Zone Calculation', share: 'Auto-calculated', dotColor: 'bg-emerald-500' }
+        ],
+        total: { count: 'Ready to Launch', share: '100%' }
+      },
+      followUps: ["Repeat yesterday's orders", 'How many orders today?', 'Current hub status', 'How many riders are active?']
+    };
+  }
+
+  // Nothing to draw without an answer to draw it from.
+  if (!res) return null;
+
+  const share = (n, total) => (total > 0 ? `${Math.round((n / total) * 100)}%` : '0%');
+  const COLORS = ['emerald', 'amber', 'rose'];
+  const DOTS = { emerald: 'bg-emerald-500', amber: 'bg-amber-500', rose: 'bg-rose-500' };
+
+  // ── A list answer: hubs, tenants, late orders, pickup sites ──
+  //
+  // `res.list.items` is what the intent actually returned. The six invented
+  // hub names that used to stand in when it was empty are gone: an empty list
+  // means the query found nothing, and six fictional hubs is the one response
+  // that cannot be recovered from by looking closer.
+  const items = res?.list?.items;
+  if (Array.isArray(items) && items.length > 0) {
+    // Matched against a vocabulary, not with `includes('active')`.
+    //
+    // That substring test — carried here from the original before a check
+    // caught it — reports "Inactive" as active, because the word contains the
+    // word. The old branch's own sample data tripped it: six hubs, one of them
+    // "Inactive", displayed as 6/6 operational. Anything not recognisably up
+    // counts as down, because a hub wrongly shown offline is a false alarm
+    // somebody investigates, while one wrongly shown online hides a real
+    // outage.
+    const UP = new Set(['active', 'available', 'online', 'operational', 'open', 'on duty', 'onduty']);
+    const isUp = (item) => UP.has(String(item.meta || '').trim().toLowerCase());
+    const up = items.filter(isUp).length;
+    const down = items.length - up;
+    const hasStatusMeta = items.some((item) => item.meta);
+
+    return {
+      flow: hasStatusMeta
+        ? {
+            title: res.list.title || 'Breakdown',
+            root: { label: (res.metric?.label || 'TOTAL').toUpperCase(), value: res.metric?.value ?? items.length },
+            branches: [
+              { label: 'Active', count: up, share: share(up, items.length), color: 'emerald' },
+              { label: 'Inactive', count: down, share: share(down, items.length), color: 'rose' }
+            ]
+          }
+        : null,
+      table: {
+        title: res.list.title || 'Detail',
+        headers: ['NAME', 'DETAIL', 'STATUS'],
+        rows: items.slice(0, 12).map((item) => ({
+          status: item.label,
+          count: item.meta || '—',
+          share: item.meta ? (isUp(item) ? 'Operational' : 'Offline') : '—',
+          dotColor: item.meta && !isUp(item) ? 'bg-rose-500' : 'bg-emerald-500'
+        })),
+        total: hasStatusMeta
+          ? { count: `${up} / ${items.length} Active`, share: share(up, items.length) }
+          : { count: `${items.length} rows`, share: '100%' }
+      },
+      followUps: res.followUps || null
+    };
+  }
+
+  // ── A statistical answer: a metric plus its parts ──
+  //
+  // This was the last branch in the file and unreachable for every topic a
+  // literal answered first. It is the main path now.
+  const stats = res?.stats;
+  if (Array.isArray(stats) && stats.length >= 2) {
+    const total = stats.reduce((acc, s) => acc + (Number(s.value) || 0), 0);
+    const branches = stats.slice(0, 3).map((s, i) => {
+      const value = Number(s.value) || 0;
+      return { label: s.label, count: value, share: share(value, total), color: COLORS[i] || 'emerald' };
+    });
+
+    return {
+      flow: {
+        title: res.chart?.title || res.list?.title || 'Breakdown',
+        root: {
+          label: (res.metric?.label || 'TOTAL').toUpperCase(),
+          value: res.metric?.value ?? total
+        },
+        branches
+      },
+      table: {
+        title: 'Detail',
+        headers: ['CATEGORY', 'COUNT', 'SHARE'],
+        rows: stats.map((s, i) => {
+          const value = Number(s.value) || 0;
+          return {
+            status: s.label,
+            count: value,
+            share: share(value, total),
+            dotColor: DOTS[COLORS[i]] || 'bg-slate-400'
+          };
+        }),
+        total: { count: res.metric?.value ?? total, share: '100%' }
+      },
+      followUps: res.followUps || null
+    };
+  }
+
+  // A single number with no parts — the headline and metric already say it,
+  // and a one-branch tree diagram adds nothing but furniture.
+  return null;
+}
+
+function HomeFlowDropdown({ step, draft, isBusy, onChoose, onCancel }) {
+  const [options, setOptions] = useState(null);
+  const [value, setValue] = useState('');
+  const [search, setSearch] = useState('');
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setOptions(null);
+    setFailed(false);
+    setValue('');
+    Promise.resolve(step.options?.(draft) ?? [])
+      .then((list) => {
+        if (alive) {
+          setOptions(list || []);
+          if (list?.length > 0) {
+            setValue(String(list[0].value));
+          }
+        }
+      })
+      .catch(() => alive && setFailed(true));
+    return () => {
+      alive = false;
+    };
+  }, [step?.id]);
+
+  if (failed) {
+    return (
+      <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-700 text-xs font-medium space-y-2">
+        <p>Could not load options for this step from the database.</p>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1 bg-white border border-slate-200 rounded-lg text-xs font-semibold text-slate-700 hover:bg-slate-50 cursor-pointer"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  if (options === null) {
+    return (
+      <div className="flex items-center gap-2 p-3.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-500 text-xs font-medium">
+        <div className="w-3.5 h-3.5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+        <span>Loading live records from operations database...</span>
+      </div>
+    );
+  }
+
+  if (!options.length) {
+    return (
+      <div className="p-3.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-600 text-xs font-medium space-y-2">
+        <p>{step.emptyHint || 'There are no repeatable orders or records found for this option.'}</p>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1 bg-white border border-slate-200 rounded-lg text-xs font-semibold text-slate-700 hover:bg-slate-50 cursor-pointer"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  const filtered = search.trim()
+    ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  const chosen = options.find((o) => String(o.value) === String(value));
+
+  return (
+    <div className="p-4 bg-slate-50/90 border border-slate-200/90 rounded-2xl space-y-3 w-full max-w-xl mt-2 mb-3 shadow-3xs">
+      <div className="text-xs font-bold text-slate-800 flex items-center justify-between">
+        <span>{step.ask}</span>
+        <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Select Day</span>
+      </div>
+
+      {options.length > 5 && (
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Filter choices..."
+          className="w-full px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+        />
+      )}
+
+      <div className="space-y-1.5 max-h-52 overflow-y-auto pr-1">
+        {filtered.map((opt) => {
+          const isSelected = String(opt.value) === String(value);
+          return (
+            <div
+              key={opt.value}
+              onClick={() => !isBusy && setValue(String(opt.value))}
+              className={cn(
+                'px-3.5 py-2.5 rounded-xl border text-xs font-medium cursor-pointer transition-all flex items-center justify-between',
+                isSelected
+                  ? 'bg-blue-50/90 border-blue-500 text-blue-900 font-semibold shadow-3xs'
+                  : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300 hover:bg-slate-50/60'
+              )}
+            >
+              <span className="truncate">{opt.label}</span>
+              {isSelected && <span className="w-2 h-2 rounded-full bg-blue-600 shrink-0 ml-2" />}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center gap-2 pt-1 border-t border-slate-200/60">
+        <button
+          type="button"
+          disabled={!value || isBusy}
+          onClick={() => onChoose(value, chosen)}
+          className="px-4 py-2 bg-[#2563EB] hover:bg-blue-700 text-white font-semibold text-xs rounded-xl shadow-xs active:scale-95 disabled:opacity-50 cursor-pointer flex items-center gap-1.5 transition-all"
+        >
+          <span>Continue</span>
+          <ArrowRight className="w-3.5 h-3.5" />
+        </button>
+        <button
+          type="button"
+          disabled={isBusy}
+          onClick={onCancel}
+          className="px-3 py-2 bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 font-semibold text-xs rounded-xl hover:text-slate-800 cursor-pointer transition-all"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  // State
+  const [query, setQuery] = useState('');
+  const [isThinking, setIsThinking] = useState(false);
+  const [conversation, setConversation] = useState([]);
+  const [activeResponse, setActiveResponse] = useState(null);
+  const [context, setContext] = useState({ lastIntentId: null, lastParams: null });
+  const [showSources, setShowSources] = useState(false);
+  const [isListening, setIsListening] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+  const [suggestions, setSuggestions] = useState(MILETRUTH_SUGGESTIONS);
+  const [flow, setFlow] = useState(null);
+
+  const inputRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  const recognitionRef = useRef(null);
+  const synthRef = useRef(window.speechSynthesis);
+
+  // Stop speech when unmounting or clearing
+  useEffect(() => {
+    return () => {
+      if (synthRef.current) {
+        synthRef.current.cancel();
+      }
+      if (recognitionRef.current) {
+        recognitionRef.current.stop();
+      }
+    };
+  }, []);
+
+  // Speak text helper
+  const speakText = (text) => {
+    if (!('speechSynthesis' in window) || !text) return;
+    synthRef.current.cancel();
+    const cleanText = text.replace(/[*_#`]/g, '').trim();
+    const utterance = new SpeechSynthesisUtterance(cleanText);
+    utterance.rate = 1.0;
+    utterance.pitch = 1.0;
+    utterance.onstart = () => setIsSpeaking(true);
+    utterance.onend = () => setIsSpeaking(false);
+    utterance.onerror = () => setIsSpeaking(false);
+    synthRef.current.speak(utterance);
+  };
+
+  const finishRepeat = async (draft) => {
+    setIsThinking(true);
+    try {
+      const run = await buildRepeatRun(draft.day);
+
+      if (!run.valid.length && run.already.length) {
+        const payload = {
+          id: Date.now(),
+          userQuery: '',
+          title: `All ${run.already.length} of ${describeDay(draft.day)}’s orders have already been created today.`,
+          summary: 'Creating them again produces a second set of orders to the same customers.',
+          itemsList: run.already.slice(0, 12).map((r) => ({
+            label: `${r.customer_name} · ${r.customer_phone}`,
+            meta: r.deliveryaddress
+          })),
+          form: {
+            kind: 'confirmBulk',
+            status: 'open',
+            draft: { rows: run.already, invalid: run.drifted, repeatOf: draft.day },
+            confirmLabel: `Create all ${run.already.length} again`
+          },
+          visualData: {
+            flow: {
+              title: 'Repeat Run Validation Flow',
+              root: { label: `${describeDay(draft.day).toUpperCase()} ORDERS`, value: run.total },
+              branches: [
+                { label: 'Already Created', count: run.already.length, share: '100%', color: 'amber' },
+                { label: 'Excluded / Drift', count: run.drifted.length, share: '0%', color: 'rose' }
+              ]
+            },
+            table: {
+              title: 'Repeat Run Summary',
+              headers: ['CUSTOMER & PHONE', 'DELIVERY ADDRESS', 'STATUS'],
+              rows: run.already.slice(0, 8).map((r) => ({
+                status: `${r.customer_name} · ${r.customer_phone}`,
+                count: r.deliveryaddress,
+                share: 'Already Created',
+                dotColor: 'bg-amber-500'
+              })),
+              total: { count: `${run.already.length} Orders`, share: '100%' }
+            }
+          },
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, payload]);
+        setActiveResponse(payload);
+        setFlow(null);
+        return;
+      }
+
+      if (!run.valid.length) {
+        const payload = {
+          id: Date.now(),
+          userQuery: '',
+          title: 'Nothing to repeat',
+          summary: run.drifted.length
+            ? `None can be repeated — the first issue is that ${run.drifted[0]?.error || 'records drifted'}.`
+            : 'That day has no repeatable orders.',
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, payload]);
+        setActiveResponse(payload);
+        setFlow(null);
+        return;
+      }
+
+      const payload = {
+        id: Date.now(),
+        userQuery: '',
+        title: `${run.valid.length} order${run.valid.length === 1 ? '' : 's'} ready to repeat.`,
+        summary: [
+          run.already.length ? `${run.already.length} already created today (left out to prevent duplicates).` : null,
+          run.drifted.length ? `${run.drifted.length} can’t be repeated (${run.drifted[0]?.error}).` : null,
+          run.unpriced.length ? `${run.unpriced.length} couldn’t be priced at today’s tariff.` : null,
+          'All verified orders will be assigned to their previous routes.'
+        ]
+          .filter(Boolean)
+          .join(' '),
+        itemsList: run.valid.slice(0, 12).map((r) => ({
+          label: `${r.customer_name} · ${r.customer_phone}`,
+          meta: `₹${Number(r.finalprice || 0).toFixed(2)}${
+            r.previousPrice != null && Number(r.previousPrice) !== Number(r.finalprice)
+              ? ` (was ₹${Number(r.previousPrice).toFixed(2)})`
+              : ''
+          } · ${r.deliveryaddress}`
+        })),
+        form: {
+          kind: 'confirmBulk',
+          status: 'open',
+          draft: { rows: run.valid, invalid: run.drifted, repeatOf: draft.day },
+          confirmLabel: `Create all ${run.valid.length} orders`,
+          altLabel: run.already.length
+            ? `Include the ${run.already.length} already created today (${run.valid.length + run.already.length} total)`
+            : undefined,
+          altDraft: run.already.length
+            ? { rows: [...run.valid, ...run.already], invalid: run.drifted, repeatOf: draft.day }
+            : undefined
+        },
+        visualData: {
+          flow: {
+            title: 'Repeat Run Validation Flow',
+            root: { label: `${describeDay(draft.day).toUpperCase()} ORDERS`, value: run.total },
+            branches: [
+              {
+                label: 'Validated & Ready',
+                count: run.valid.length,
+                share: `${Math.round((run.valid.length / (run.total || 1)) * 100)}%`,
+                color: 'emerald'
+              },
+              {
+                label: 'Already Created',
+                count: run.already.length,
+                share: `${Math.round((run.already.length / (run.total || 1)) * 100)}%`,
+                color: 'amber'
+              },
+              {
+                label: 'Excluded / Drift',
+                count: run.drifted.length,
+                share: `${Math.round((run.drifted.length / (run.total || 1)) * 100)}%`,
+                color: 'rose'
+              }
+            ]
+          },
+          table: {
+            title: 'Repeat Run Preview Detail',
+            headers: ['CUSTOMER & RECIPIENT', 'ROUTE / ADDRESS', 'FINAL PRICE'],
+            rows: run.valid.slice(0, 8).map((r) => ({
+              status: `${r.customer_name} · ${r.customer_phone}`,
+              count: r.deliveryaddress,
+              share: `₹${Number(r.finalprice || 0).toFixed(2)}`,
+              dotColor: 'bg-emerald-500'
+            })),
+            total: { count: `${run.valid.length} Orders Verified`, share: '100%' }
+          }
+        },
+        actions: [
+          { label: 'Open Dispatch Board', path: '/doormile/dispatch' },
+          { label: 'View Orders Pipeline', path: '/doormile/orders' }
+        ],
+        timestamp: dayjs().format('hh:mm A')
+      };
+
+      setConversation((prev) => [...prev, payload]);
+      setActiveResponse(payload);
+      setFlow(null);
+    } catch (err) {
+      console.error('finishRepeat error', err);
+      OpenToast('Could not process repeat run', 'error', 3000);
+    } finally {
+      setIsThinking(false);
+    }
+  };
+
+  const finishOrder = async (draft) => {
+    const { ok, errors } = validateOrderDraft(draft);
+    if (!ok) {
+      const errPayload = {
+        id: Date.now(),
+        userQuery: '',
+        title: "This order isn't complete",
+        summary: `${Object.values(errors).join(' · ')}. Say “create an order” to start again.`,
+        timestamp: dayjs().format('hh:mm A')
+      };
+      setConversation((prev) => [...prev, errPayload]);
+      setActiveResponse(errPayload);
+      setFlow(null);
+      return;
+    }
+
+    const payload = {
+      id: Date.now(),
+      userQuery: '',
+      title: `That comes to ₹${Number(draft.finalprice || 0).toFixed(2)}.`,
+      summary: 'Order details verified and ready to submit.',
+      itemsList: [
+        { label: 'Customer', meta: `${draft.customer_name} · ${draft.customer_phone}` },
+        { label: 'Pickup', meta: draft.__pickup?.locationname || draft.__pickup?.address || '—' },
+        { label: 'Drop', meta: draft.deliveryaddress },
+        { label: 'Service', meta: draft.service_option || 'Normal' },
+        { label: 'Price', meta: `₹${Number(draft.finalprice).toFixed(2)}` }
+      ],
+      form: {
+        kind: 'confirmOrder',
+        status: 'open',
+        draft,
+        confirmLabel: 'Create single order'
+      },
+      visualData: deriveVisualData(null, 'create order'),
+      actions: [
+        { label: 'Open Dispatch Board', path: '/doormile/dispatch' },
+        { label: 'View Orders Pipeline', path: '/doormile/orders' }
+      ],
+      timestamp: dayjs().format('hh:mm A')
+    };
+
+    setConversation((prev) => [...prev, payload]);
+    setActiveResponse(payload);
+    setFlow(null);
+  };
+
+  const finishAssign = async (draft) => {
+    const label = draft.booking?.bookingno || `#${draft.booking?.bookingid}`;
+    const payload = {
+      id: Date.now(),
+      userQuery: '',
+      title: `Assign ${label} to ${describeRider(draft.__rider)}?`,
+      summary: draft.__rider?.milerprofileid
+        ? 'The rider will receive an instant push notification.'
+        : 'The rider has no profile ID, so no push notification can be sent.',
+      form: {
+        kind: 'confirmAssign',
+        status: 'open',
+        draft,
+        confirmLabel: 'Assign rider'
+      },
+      // No chart on a confirmation card. This read
+      // `deriveVisualData(null, 'workforce')`, which had no result to work
+      // from and returned the invented 46-rider staffing table as decoration
+      // beneath "Assign this booking to this rider?" — numbers with no bearing
+      // on the decision, sitting where real ones would.
+      visualData: null,
+      timestamp: dayjs().format('hh:mm A')
+    };
+    setConversation((prev) => [...prev, payload]);
+    setActiveResponse(payload);
+    setFlow(null);
+  };
+
+  const chooseStep = async (turn, value, option) => {
+    if (!flow || flow.complete) return;
+    setConversation((prev) =>
+      prev.map((t) => (t.id === turn.id ? { ...t, flowStep: { ...t.flowStep, __answered: true } } : t))
+    );
+    setIsThinking(true);
+
+    try {
+      const BY_KIND = {
+        repeatRun: [answerRepeatStep, finishRepeat],
+        createOrder: [answerOrderStep, finishOrder],
+        assignRider: [answerAssignStep, finishAssign]
+      };
+      const [answer, finish] = BY_KIND[flow.kind] || BY_KIND.createOrder;
+      const next = await answer(flow, value, option);
+      setFlow(next.flow);
+
+      if (!next.done) {
+        const stepTurn = {
+          id: Date.now(),
+          userQuery: '',
+          title: next.ask || next.step?.ask,
+          flowStep: next.step,
+          flowDraft: next.flow?.draft,
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, stepTurn]);
+        setActiveResponse(stepTurn);
+      } else {
+        await finish(next.draft);
+      }
+    } catch (err) {
+      console.error('chooseStep error', err);
+      OpenToast('Something went wrong on that step — please try again', 'error', 3000);
+    } finally {
+      setIsThinking(false);
+    }
+  };
+
+  const cancelFlowAction = (turn) => {
+    setConversation((prev) =>
+      prev.map((t) => (t.id === turn.id ? { ...t, form: { ...t.form, status: 'cancelled' }, flowStep: { ...t.flowStep, __answered: true } } : t))
+    );
+    setFlow(null);
+    OpenToast('Action cancelled', 'info', 2000);
+  };
+
+  const submitForm = async (turn, values) => {
+    if (turn.form?.status !== 'open') return;
+    const targetId = turn.id;
+
+    setConversation((prev) =>
+      prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'running' } } : t))
+    );
+
+    try {
+      if (turn.form.kind === 'confirmBulk') {
+        const { rows, invalid, ...shared } = values?.rows ? values : turn.form.draft;
+        const res = await executeCreateBulk(rows, shared);
+        queryClient.invalidateQueries();
+
+        const repeatAssign = rows.some((r) => r.__previousMilerUserId != null)
+          ? await executeRepeatAssign(res.createdPairs, rows)
+          : null;
+
+        if (repeatAssign?.assigned) {
+          queryClient.invalidateQueries();
+        }
+
+        setConversation((prev) =>
+          prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'done' } } : t))
+        );
+
+        OpenToast(`Created ${res.created} orders successfully!`, 'success', 3000);
+
+        const donePayload = {
+          id: Date.now(),
+          userQuery: '',
+          title: `Created ${res.created} of ${rows.length} orders.`,
+          summary:
+            res.failed === 0
+              ? `All ${res.created} orders have been submitted to the dispatch board and scheduled with their designated routes.`
+              : `${res.created} orders were created, ${res.failed} failed.`,
+          actions: [
+            { label: 'Open Dispatch Board', path: '/doormile/dispatch' },
+            { label: 'View Orders Pipeline', path: '/doormile/orders' }
+          ],
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, donePayload]);
+        setActiveResponse(donePayload);
+        return;
+      }
+
+      if (turn.form.kind === 'confirmOrder') {
+        const draft = turn.form.draft;
+        const payload = buildOrderPayload(draft, draft.__pickup);
+        const res = await executeCreateOrder(payload);
+        if (res.ok) {
+          queryClient.invalidateQueries();
+          setConversation((prev) =>
+            prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'done' } } : t))
+          );
+          OpenToast(`Order ${res.bookingno || res.id} created!`, 'success', 3000);
+
+          const donePayload = {
+            id: Date.now(),
+            userQuery: '',
+            title: `Created order ${res.bookingno || res.id || ''}.`,
+            summary: 'It appears on the Orders page under Pending until a rider is assigned.',
+            actions: [
+              { label: 'Open Dispatch Board', path: '/doormile/dispatch' },
+              { label: 'View Orders Pipeline', path: '/doormile/orders' }
+            ],
+            timestamp: dayjs().format('hh:mm A')
+          };
+          setConversation((prev) => [...prev, donePayload]);
+          setActiveResponse(donePayload);
+        } else {
+          setConversation((prev) =>
+            prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'failed', error: res.message } } : t))
+          );
+          OpenToast(res.message || 'Failed to create order', 'error', 3000);
+        }
+        return;
+      }
+
+      if (turn.form.kind === 'confirmAssign') {
+        const { booking, __rider: rider } = turn.form.draft;
+        const res = await executeAssign(booking, rider);
+        if (res.ok) {
+          queryClient.invalidateQueries();
+          setConversation((prev) =>
+            prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'done' } } : t))
+          );
+          OpenToast(`${res.bookingLabel} assigned to ${describeRider(rider)}`, 'success', 3000);
+        } else {
+          setConversation((prev) =>
+            prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'failed', error: res.message } } : t))
+          );
+          OpenToast(res.message || 'Assignment failed', 'error', 3000);
+        }
+        return;
+      }
+    } catch (err) {
+      console.error('submitForm error', err);
+      setConversation((prev) =>
+        prev.map((t) => (t.id === targetId ? { ...t, form: { ...t.form, status: 'failed', error: err.message } } : t))
+      );
+    }
+  };
+
+  // Quick prompt submission through real MileTruth engine
+  const handleAsk = async (promptText) => {
+    const text = promptText || query;
+    if (!text.trim() || isThinking) return;
+
+    const userMessage = text.trim();
+    setQuery('');
+    setIsThinking(true);
+    setShowSources(false);
+
+    try {
+      // 1. Mid-flow typed answer handling
+      if (flow && !flow.complete) {
+        if (/^(?:cancel|stop|nevermind|never mind|forget it)$/i.test(userMessage)) {
+          setFlow(null);
+          const cancelTurn = {
+            id: Date.now(),
+            userQuery: userMessage,
+            title: 'Action Cancelled',
+            summary: 'Cancelled — nothing was created.',
+            timestamp: dayjs().format('hh:mm A')
+          };
+          setConversation((prev) => [...prev, cancelTurn]);
+          setActiveResponse(cancelTurn);
+          setIsThinking(false);
+          return;
+        }
+
+        if (flow.kind === 'repeatRun') {
+          const next = await answerRepeatStep(flow, userMessage);
+          setFlow(next.flow);
+          if (!next.done) {
+            const stepTurn = {
+              id: Date.now(),
+              userQuery: userMessage,
+              title: next.ask || next.step?.ask,
+              flowStep: next.step,
+              flowDraft: next.flow?.draft,
+              timestamp: dayjs().format('hh:mm A')
+            };
+            setConversation((prev) => [...prev, stepTurn]);
+            setActiveResponse(stepTurn);
+          } else {
+            await finishRepeat(next.draft);
+          }
+          setIsThinking(false);
+          return;
+        }
+
+        if (flow.kind === 'createOrder') {
+          const next = await answerOrderStep(flow, userMessage);
+          setFlow(next.flow);
+          if (!next.done) {
+            const stepTurn = {
+              id: Date.now(),
+              userQuery: userMessage,
+              title: next.ask || next.step?.ask,
+              flowStep: next.step,
+              flowDraft: next.flow?.draft,
+              timestamp: dayjs().format('hh:mm A')
+            };
+            setConversation((prev) => [...prev, stepTurn]);
+            setActiveResponse(stepTurn);
+          } else {
+            await finishOrder(next.draft);
+          }
+          setIsThinking(false);
+          return;
+        }
+      }
+
+      // Repeat Runs flow trigger
+      if (
+        userMessage.toLowerCase().includes('repeat') ||
+        userMessage.toLowerCase().includes('redo') ||
+        userMessage.toLowerCase().includes('yesterday')
+      ) {
+        const started = await startRepeatFlow();
+        setFlow(started.flow);
+        const flowTurn = {
+          id: Date.now(),
+          userQuery: userMessage,
+          title: started.ask || started.step?.ask || 'Which day’s orders should I repeat?',
+          summary: 'Scanning recent operational batches and dispatch logs.',
+          flowStep: started.step,
+          flowDraft: started.flow?.draft,
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, flowTurn]);
+        setActiveResponse(flowTurn);
+        setIsThinking(false);
+        return;
+      }
+
+      // Single order flow trigger
+      if (
+        (userMessage.toLowerCase().includes('create') && userMessage.toLowerCase().includes('order')) ||
+        userMessage.toLowerCase().includes('new order')
+      ) {
+        const started = await startOrderFlow();
+        setFlow(started.flow);
+        const flowTurn = {
+          id: Date.now(),
+          userQuery: userMessage,
+          title: started.ask || started.step?.ask || 'Configure New Order',
+          summary: 'Gathering booking and route configuration.',
+          flowStep: started.step,
+          flowDraft: started.flow?.draft,
+          timestamp: dayjs().format('hh:mm A')
+        };
+        setConversation((prev) => [...prev, flowTurn]);
+        setActiveResponse(flowTurn);
+        setIsThinking(false);
+        return;
+      }
+
+      // 2. Initial query answering via intent engine
+      const res = await answerQuestion(userMessage, context);
+
+      if (res) {
+        setContext({ lastIntentId: res.intentId, lastParams: res.params });
+
+        // Build dynamic action deep-links based on intent
+        const actions = [];
+        const intent = String(res.intentId || '').toLowerCase();
+        if (intent.includes('create') || userMessage.toLowerCase().includes('create')) {
+          actions.push({ label: 'Create Single Order', path: '/doormile/orders/create' });
+          actions.push({ label: 'Upload Bulk Orders', path: '/doormile/orders/multiple' });
+        } else if (intent.includes('order') || intent.includes('booking')) {
+          actions.push({ label: 'Open Orders Pipeline', path: '/doormile/orders' });
+          actions.push({ label: 'View Dispatch Board', path: '/doormile/dispatch' });
+        } else if (intent.includes('rider') || intent.includes('miler') || intent.includes('workforce') || intent.includes('coverage')) {
+          actions.push({ label: 'Open Dispatch Board', path: '/doormile/dispatch' });
+          actions.push({ label: 'View Milers Directory', path: '/doormile/milers' });
+        } else if (intent.includes('exception') || intent.includes('attention') || intent.includes('stalled')) {
+          actions.push({ label: 'Inspect Exceptions', path: '/doormile/exceptions' });
+          actions.push({ label: 'Open Dispatch Board', path: '/doormile/dispatch' });
+        } else if (intent.includes('pricing') || intent.includes('cost') || intent.includes('profit')) {
+          actions.push({ label: 'View Profitability Report', path: '/doormile/reports/profitability' });
+          actions.push({ label: 'Open Pricing Matrix', path: '/doormile/pricing' });
+        } else {
+          actions.push({ label: 'Open Operations Board', path: '/doormile/dispatch' });
+          actions.push({ label: 'View Orders Pipeline', path: '/doormile/orders' });
+        }
+
+        const visualData = deriveVisualData(res, userMessage);
+        // Optional now: deriveVisualData returns null when the answer carries
+        // nothing to chart, instead of inventing a breakdown to fill the slot.
+        const nextSuggestions = visualData?.followUps || MILETRUTH_SUGGESTIONS;
+        setSuggestions(nextSuggestions);
+
+        const responsePayload = {
+          id: Date.now(),
+          userQuery: userMessage,
+          title: res.headline || res.text || 'Live Operations Report',
+          summary: res.detail || (res.headline !== res.text ? res.text : '') || '',
+          metric: res.metric || null,
+          stats: res.stats || [],
+          list: res.list || null,
+          sourceCalls: res.sourceCalls || [],
+          actions,
+          visualData,
+          timestamp: dayjs().format('hh:mm A')
+        };
+
+        setActiveResponse(responsePayload);
+        setConversation((prev) => [...prev, responsePayload]);
+
+        if (isSpeaking) {
+          const speechContent = `${responsePayload.title}. ${responsePayload.summary || ''}`;
+          speakText(speechContent);
+        }
+      } else {
+        // The engine had no answer. Say that.
+        //
+        // This branch used to claim the opposite. It set the headline to
+        // "Operational snapshot generated from live telemetry", drew a chart of
+        // 46 riders from a hardcoded default, and — worst of the three — put a
+        // forged entry in `sourceCalls`:
+        //
+        //   { name: 'getallridersummary', target: '/admin/milers',
+        //     status: 'complete', stats: '46 milers scanned' }
+        //
+        // No such call was made. `sourceCalls` is the row of tool-call
+        // disclosures an operator opens to check where a number came from, so
+        // that entry did not merely decorate a wrong answer, it defeated the
+        // one mechanism for noticing it was wrong. A questionable figure that
+        // cites nothing invites a second look; the same figure citing a
+        // successful API call does not.
+        //
+        // An unanswered question is a normal outcome — the intent catalog is
+        // finite and the documentation fallback does not always hit. The
+        // operator needs to know it happened so they can rephrase or open the
+        // page themselves, which is what the actions below are for.
+        setSuggestions(MILETRUTH_SUGGESTIONS);
+
+        const responsePayload = {
+          id: Date.now(),
+          userQuery: userMessage,
+          title: "I could not answer that from live data.",
+          summary:
+            'Nothing in the intent catalogue matched this question, so there is no figure to show. ' +
+            'Try naming a date, a status or a client — or open the board below and read it directly.',
+          sourceCalls: [],
+          actions: [
+            { label: 'Open Dispatch Board', path: '/doormile/dispatch' },
+            { label: 'View Orders Pipeline', path: '/doormile/orders' }
+          ],
+          visualData: null,
+          timestamp: dayjs().format('hh:mm A')
+        };
+
+        setActiveResponse(responsePayload);
+        setConversation((prev) => [...prev, responsePayload]);
+      }
+    } catch (err) {
+      console.error('handleAsk error', err);
+      // A failure reports as a failure.
+      //
+      // Was titled "Query Processing Notice" and, with no message on the
+      // error, read "Processed query with latest cached operational snapshot"
+      // — while drawing the same invented 46-rider chart. There is no cache,
+      // nothing was processed, and an operator told a request succeeded will
+      // act on whatever numbers are on screen.
+      const errorPayload = {
+        id: Date.now(),
+        userQuery: userMessage,
+        title: 'That query failed.',
+        summary: err?.message
+          ? `The request did not complete: ${err.message}`
+          : 'The request did not complete. Nothing was read, so there are no figures to show.',
+        visualData: null,
+        sourceCalls: [],
+        actions: [{ label: 'Open Dispatch Board', path: '/doormile/dispatch' }],
+        timestamp: dayjs().format('hh:mm A')
+      };
+      setActiveResponse(errorPayload);
+      setConversation((prev) => [...prev, errorPayload]);
+    } finally {
+      setIsThinking(false);
+    }
+  };
+
+  const toggleSpeak = () => {
+    if (isSpeaking) {
+      if (synthRef.current) synthRef.current.cancel();
+      setIsSpeaking(false);
+      OpenToast('Voice assistant muted', 'info', 2000);
+    } else {
+      if (activeResponse) {
+        const speechContent = `${activeResponse.title}. ${activeResponse.summary || ''}`;
+        speakText(speechContent);
+        OpenToast('Reading live operational findings', 'info', 2000);
+      } else {
+        OpenToast('Voice active — speak or ask a question to listen', 'info', 2000);
+        setIsSpeaking(true);
+      }
+    }
+  };
+
+  const toggleMic = () => {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      OpenToast('Speech recognition is not supported in this browser.', 'warning', 3000);
+      return;
+    }
+
+    if (isListening) {
+      if (recognitionRef.current) recognitionRef.current.stop();
+      setIsListening(false);
+    } else {
+      try {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US';
+
+        recognition.onstart = () => {
+          setIsListening(true);
+          OpenToast('Listening for voice command...', 'info', 2000);
+        };
+
+        recognition.onresult = (event) => {
+          const transcript = event.results[0][0].transcript;
+          setQuery(transcript);
+          setIsListening(false);
+          handleAsk(transcript);
+        };
+
+        recognition.onerror = () => {
+          setIsListening(false);
+          OpenToast('Voice input error. Please type your query.', 'error', 2000);
+        };
+
+        recognition.onend = () => {
+          setIsListening(false);
+        };
+
+        recognitionRef.current = recognition;
+        recognition.start();
+      } catch (e) {
+        setIsListening(false);
+      }
+    }
+  };
+
+  const copyResponse = (item) => {
+    const target = item || activeResponse;
+    if (!target) return;
+    const copyText = `${target.title}\n\n${target.summary || ''}`;
+    navigator.clipboard.writeText(copyText).then(() => {
+      OpenToast('Response copied to clipboard', 'success', 2000);
+    });
+  };
+
+  const resetConversation = () => {
+    setActiveResponse(null);
+    setConversation([]);
+    setQuery('');
+    setFlow(null);
+    setSuggestions(MILETRUTH_SUGGESTIONS);
+    if (synthRef.current) synthRef.current.cancel();
+    setIsSpeaking(false);
+  };
+
+  return (
+    <div className="flex-1 flex flex-col justify-between py-3 sm:py-5 px-4 sm:px-6 md:px-8 max-w-5xl mx-auto w-full font-sans text-slate-800">
+      
+      {/* HERO / CONVERSATIONAL CENTER */}
+      <main className="flex-1 flex flex-col items-center justify-center my-auto py-2 sm:py-4 w-full">
+        
+        {/* Center Logo Branding (Visible when idle) */}
+        {!activeResponse && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex items-center justify-center mb-4 cursor-pointer select-none"
+            onClick={resetConversation}
+          >
+            <img
+              src={DOORMILE_WORDMARK_URL}
+              alt="Doormile"
+              style={LOGO_FILTER}
+              className="h-8 sm:h-9 w-auto object-contain"
+            />
+          </motion.div>
+        )}
+
+        {/* Floating Card Container */}
+        <motion.div
+          layout
+          initial={{ opacity: 0, scale: 0.99 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.35, delay: 0.05 }}
+          className="w-full bg-white rounded-3xl border border-slate-200/90 shadow-sm hover:shadow-md transition-shadow p-5 sm:p-6 relative z-10"
+        >
+          {/* ==================== 1. IDLE / NEW CHAT STATE (MATCHES SCREENSHOT) ==================== */}
+          {!activeResponse && (
+            <div className="space-y-3.5">
+              {/* Textarea Input */}
+              <div className="min-h-[50px]">
+                <textarea
+                  ref={inputRef}
+                  rows={2}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      handleAsk();
+                    }
+                  }}
+                  placeholder="Ask anything, create anything"
+                  className="w-full bg-transparent border-none outline-none text-base font-normal text-slate-800 placeholder:text-slate-400 placeholder:font-normal resize-none"
+                />
+              </div>
+
+              {/* Action Row Inside Card */}
+              <div className="flex items-center justify-between pt-1">
+                {/* Plus Button */}
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={() => setPlusMenuOpen((v) => !v)}
+                    className="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 flex items-center justify-center transition-all active:scale-95 cursor-pointer"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </button>
+
+                  {/* Plus Menu Popup & Backdrop */}
+                  {plusMenuOpen && (
+                    <>
+                      <div
+                        className="fixed inset-0 z-40 bg-transparent"
+                        onClick={() => setPlusMenuOpen(false)}
+                      />
+                      <div className="absolute left-0 bottom-full mb-2.5 w-60 bg-white border border-slate-200 rounded-2xl shadow-xl p-2 z-50 text-xs animate-in fade-in zoom-in-95">
+                        <button
+                          onClick={() => {
+                            setPlusMenuOpen(false);
+                            navigate('/doormile/orders/multiple');
+                          }}
+                          className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                        >
+                          <Upload className="w-4 h-4 text-blue-500" />
+                          Upload Bulk Sheet
+                        </button>
+                        <button
+                          onClick={() => {
+                            setPlusMenuOpen(false);
+                            navigate('/doormile/orders/create');
+                          }}
+                          className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                        >
+                          <Package className="w-4 h-4 text-emerald-500" />
+                          Create Single Order
+                        </button>
+                        <button
+                          onClick={() => {
+                            setPlusMenuOpen(false);
+                            navigate('/doormile/dispatch');
+                          }}
+                          className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                        >
+                          <Clock className="w-4 h-4 text-purple-500" />
+                          Launch Dispatch Board
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                {/* Right: Mic & Speak Button */}
+                <div className="flex items-center gap-2.5">
+                  <button
+                    type="button"
+                    onClick={toggleMic}
+                    className={cn(
+                      'p-2 rounded-full text-slate-400 hover:text-slate-600 transition-colors cursor-pointer',
+                      isListening && 'text-blue-600 bg-blue-50 ring-2 ring-blue-500/20 animate-pulse'
+                    )}
+                    title={isListening ? 'Listening...' : 'Voice Input'}
+                  >
+                    <Mic className="w-4 h-4" />
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => handleAsk()}
+                    disabled={!query.trim() && !isThinking}
+                    className="px-5 py-2 rounded-full bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                    title="Send message"
+                  >
+                    <Send className="w-3.5 h-3.5" />
+                    <span>Send</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Thinking / Spinner */}
+              {isThinking && (
+                <div className="mt-3 pt-3 border-t border-slate-100 flex items-center gap-2.5 text-xs text-slate-700 font-medium">
+                  <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                  <span>Querying live operations through MileTruth...</span>
+                </div>
+              )}
+
+              {/* Divider & Suggestion Pills */}
+              <div className="pt-3 border-t border-slate-100/90">
+                <div className="flex flex-wrap items-center gap-2 sm:gap-2.5">
+                  {suggestions.map((sug) => (
+                    <button
+                      key={sug}
+                      type="button"
+                      onClick={() => handleAsk(sug)}
+                      className="px-4 py-1.5 bg-white hover:bg-slate-50 border border-slate-200/90 rounded-full text-xs font-normal text-slate-700 transition-all hover:border-slate-300 active:scale-95 cursor-pointer shadow-3xs"
+                    >
+                      {sug}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* ==================== 2. ACTIVE CONVERSATIONAL STATE ==================== */}
+          {activeResponse && (
+            <div>
+              {/* Card Top Header (Matching Design) */}
+              <div className="flex items-center justify-between pb-3.5 mb-4 border-b border-slate-100">
+                {/* Left: Indicator + Agent Title */}
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                  <span className="text-xs sm:text-sm font-bold text-slate-800 tracking-tight">
+                    MileTruth AI Core
+                  </span>
+                </div>
+
+                {/* Right: Controls & Workspace Mode */}
+                <div className="flex items-center gap-3 text-slate-400">
+                  <button
+                    type="button"
+                    onClick={() => OpenToast('Conversation history synchronized', 'info', 2000)}
+                    title="History"
+                    className="p-1 hover:text-slate-700 transition-colors cursor-pointer"
+                  >
+                    <History className="w-4 h-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={resetConversation}
+                    title="New Chat / Reset"
+                    className="p-1 hover:text-slate-700 transition-colors cursor-pointer"
+                  >
+                    <RotateCcw className="w-4 h-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => navigate('/doormile/dispatch')}
+                    className="text-xs font-medium text-slate-500 hover:text-slate-900 transition-colors cursor-pointer ml-1"
+                  >
+                    Workspace Mode
+                  </button>
+                </div>
+              </div>
+
+              {/* Active Conversation Thread */}
+              <div className="space-y-6 mb-5 max-h-[560px] overflow-y-auto pr-1">
+                {conversation.map((turn, tIdx) => {
+                  // `turn.visualData` was derived once when the turn was
+                  // created, from the answer itself. The `|| deriveVisualData(turn, ...)`
+                  // that used to sit here re-derived on every render from the
+                  // TURN rather than the answer — a shape with no `stats` or
+                  // `list` on it — so it could only ever produce the invented
+                  // default. A turn with no breakdown now renders without one.
+                  const visual = turn.visualData;
+
+                  return (
+                    <div key={tIdx} className="space-y-4">
+                      {/* User Message Bubble on the Right */}
+                      {turn.userQuery && (
+                        <div className="flex flex-col items-end">
+                          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1 mr-2">
+                            YOU
+                          </span>
+                          <div className="bg-[#2563EB] text-white px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold shadow-xs max-w-[85%] text-right">
+                            {turn.userQuery}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Assistant Message on the Left */}
+                      <div className="flex flex-col items-start w-full">
+                        {/* Assistant Header */}
+                        <div className="flex items-center gap-1.5 text-xs font-bold text-[#2563EB] tracking-wider uppercase mb-2">
+                          <Sparkles className="w-3.5 h-3.5" />
+                          <span>MILETRUTH AI</span>
+                        </div>
+
+                        {/* Main Headline Lead */}
+                        <div className="text-sm sm:text-base font-bold text-slate-900 leading-snug mb-3">
+                          {turn.title}
+                        </div>
+
+                        {/* Summary Detail Text (if any) */}
+                        {turn.summary && (
+                          <p className="text-xs text-slate-600 mb-3 leading-relaxed">
+                            {turn.summary}
+                          </p>
+                        )}
+
+                        {/* Interactive Dropdown Flow Step (e.g., Which day's orders to repeat) */}
+                        {turn.flowStep?.type === 'select' && (
+                          <HomeFlowDropdown
+                            step={turn.flowStep}
+                            draft={turn.flowDraft}
+                            isBusy={turn.flowStep.__answered}
+                            onChoose={(val, opt) => chooseStep(turn, val, opt)}
+                            onCancel={() => cancelFlowAction(turn)}
+                          />
+                        )}
+
+                        {/* Itemized Preview List (e.g. Orders to be created / repeated) */}
+                        {turn.itemsList && turn.itemsList.length > 0 && (
+                          <div className="w-full border border-slate-200/90 rounded-2xl bg-white p-3.5 sm:p-4 mb-3.5 shadow-3xs space-y-2">
+                            <div className="text-xs font-bold text-slate-800 border-b border-slate-100 pb-2">
+                              Orders to be created ({turn.itemsList.length})
+                            </div>
+                            <div className="space-y-1.5 max-h-48 overflow-y-auto pr-1">
+                              {turn.itemsList.map((item, iIdx) => (
+                                <div key={iIdx} className="p-2 bg-slate-50 border border-slate-100 rounded-xl text-xs flex items-center justify-between">
+                                  <span className="font-semibold text-slate-800 truncate">{item.label}</span>
+                                  <span className="text-slate-500 font-medium ml-2 text-right text-[11px] truncate max-w-[50%]">{item.meta}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Write Gate & Form Action Buttons */}
+                        {turn.form && ['confirmBulk', 'confirmOrder', 'confirmAssign'].includes(turn.form.kind) && (
+                          <div className="w-full p-3.5 bg-slate-50/80 border border-slate-200/90 rounded-2xl mb-3.5 space-y-2.5">
+                            {turn.form.status === 'open' && (
+                              <div className="flex flex-wrap items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={() => submitForm(turn, turn.form.draft)}
+                                  className="px-4 py-2 bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs rounded-xl shadow-xs transition-all cursor-pointer flex items-center gap-1.5"
+                                >
+                                  <span>{turn.form.confirmLabel || 'Create orders'}</span>
+                                  <ArrowRight className="w-3.5 h-3.5" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => cancelFlowAction(turn)}
+                                  className="px-3 py-2 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-semibold text-xs rounded-xl hover:text-slate-900 cursor-pointer transition-all"
+                                >
+                                  Cancel
+                                </button>
+                                {turn.form.altDraft && (
+                                  <button
+                                    type="button"
+                                    onClick={() => submitForm(turn, turn.form.altDraft)}
+                                    className="px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-xs rounded-xl cursor-pointer transition-all"
+                                  >
+                                    {turn.form.altLabel || 'Include everything'}
+                                  </button>
+                                )}
+                              </div>
+                            )}
+
+                            {turn.form.status === 'running' && (
+                              <div className="flex items-center gap-2 text-xs font-semibold text-blue-700">
+                                <div className="w-3.5 h-3.5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                                <span>Submitting orders and scheduling with dispatch board...</span>
+                              </div>
+                            )}
+
+                            {turn.form.status === 'done' && (
+                              <div className="text-xs font-bold text-emerald-700 flex items-center gap-1.5">
+                                <span className="w-2 h-2 rounded-full bg-emerald-500" />
+                                <span>✓ Created and Scheduled</span>
+                              </div>
+                            )}
+
+                            {turn.form.status === 'cancelled' && (
+                              <div className="text-xs font-medium text-slate-500">
+                                Cancelled — nothing was sent.
+                              </div>
+                            )}
+
+                            {turn.form.status === 'failed' && (
+                              <div className="text-xs font-semibold text-rose-700">
+                                {turn.form.error || 'Execution failed. Try again.'}
+                              </div>
+                            )}
+                          </div>
+                        )}
+
+                        {/* 1. VISUAL FLOW CHART BOX (Staff Allocation Flow) */}
+                        {visual?.flow && (
+                          <div className="w-full border border-slate-200/90 rounded-2xl bg-white p-4 sm:p-5 mb-3.5 shadow-3xs">
+                            {/* Flow Header */}
+                            <div className="flex items-center gap-2 text-xs font-bold text-slate-800 mb-4">
+                              <GitFork className="w-3.5 h-3.5 text-blue-600 rotate-180" />
+                              <span>{visual.flow.title}</span>
+                            </div>
+
+                            {/* Flow Diagram Tree */}
+                            <div className="flex flex-col items-center w-full">
+                              {/* Root Node */}
+                              <div className="border border-blue-200 bg-blue-50/60 rounded-xl px-6 py-2 text-center shadow-3xs min-w-[130px]">
+                                <div className="text-[10px] font-bold text-blue-600 uppercase tracking-wider">
+                                  {visual.flow.root.label}
+                                </div>
+                                <div className="text-2xl font-black text-blue-700 leading-none mt-0.5">
+                                  {visual.flow.root.value}
+                                </div>
+                              </div>
+
+                              {/* Tree Branching Connecting Lines */}
+                              <div className="w-full max-w-md flex flex-col items-center">
+                                {/* Vertical Line From Root */}
+                                <div className="w-0.5 h-3 bg-slate-200" />
+                                {/* Horizontal Bar Spanning Branches */}
+                                <div className="w-4/5 h-0.5 bg-slate-200" />
+                                {/* 3 Drop Lines to Leaf Nodes */}
+                                <div className="w-4/5 flex justify-between">
+                                  <div className="w-0.5 h-3 bg-slate-200" />
+                                  <div className="w-0.5 h-3 bg-slate-200" />
+                                  <div className="w-0.5 h-3 bg-slate-200" />
+                                </div>
+                              </div>
+
+                              {/* 3 Leaf Branch Nodes */}
+                              <div className="grid grid-cols-3 gap-2.5 sm:gap-4 w-full mt-0">
+                                {visual.flow.branches.map((b, bIdx) => {
+                                  const isGreen = b.color === 'emerald';
+                                  const isAmber = b.color === 'amber';
+                                  const isRose = b.color === 'rose';
+
+                                  return (
+                                    <div
+                                      key={bIdx}
+                                      className={cn(
+                                        'border rounded-xl p-2.5 sm:p-3 text-center transition-all',
+                                        isGreen && 'border-emerald-200/90 bg-emerald-50/40',
+                                        isAmber && 'border-amber-200/90 bg-amber-50/40',
+                                        isRose && 'border-rose-200/90 bg-rose-50/40'
+                                      )}
+                                    >
+                                      <div
+                                        className={cn(
+                                          'text-lg sm:text-xl font-bold leading-tight',
+                                          isGreen && 'text-emerald-900',
+                                          isAmber && 'text-amber-900',
+                                          isRose && 'text-rose-900'
+                                        )}
+                                      >
+                                        {b.count}
+                                      </div>
+                                      <div
+                                        className={cn(
+                                          'text-[10px] sm:text-[11px] font-semibold mt-0.5',
+                                          isGreen && 'text-emerald-600',
+                                          isAmber && 'text-amber-600',
+                                          isRose && 'text-rose-600'
+                                        )}
+                                      >
+                                        {b.share}
+                                      </div>
+                                      <div
+                                        className={cn(
+                                          'text-[11px] sm:text-xs font-medium mt-0.5 truncate',
+                                          isGreen && 'text-emerald-800',
+                                          isAmber && 'text-amber-800',
+                                          isRose && 'text-rose-800'
+                                        )}
+                                      >
+                                        {b.label}
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* 2. COVERAGE / STATUS DETAIL TABLE */}
+                        {visual?.table && (
+                          <div className="w-full border border-slate-200/90 rounded-2xl bg-white overflow-hidden mb-3.5 shadow-3xs">
+                            {/* Table Title Header */}
+                            <div className="flex items-center gap-2 text-xs font-bold text-slate-800 p-3 sm:p-4 pb-2.5 border-b border-slate-100">
+                              <Users className="w-3.5 h-3.5 text-blue-600" />
+                              <span>{visual.table.title}</span>
+                            </div>
+
+                            {/* Table Component */}
+                            <table className="w-full text-xs text-left">
+                              <thead className="bg-slate-50/80 text-[10px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100">
+                                <tr>
+                                  <th className="py-2 px-3 sm:px-4 font-semibold">{visual.table.headers[0]}</th>
+                                  <th className="py-2 px-3 sm:px-4 font-semibold text-center">{visual.table.headers[1]}</th>
+                                  <th className="py-2 px-3 sm:px-4 font-semibold text-right">{visual.table.headers[2]}</th>
+                                </tr>
+                              </thead>
+                              <tbody className="divide-y divide-slate-100 text-slate-700 font-medium">
+                                {visual.table.rows.map((row, rIdx) => (
+                                  <tr key={rIdx} className="hover:bg-slate-50/60 transition-colors">
+                                    <td className="py-2.5 px-3 sm:px-4 flex items-center gap-2">
+                                      <span className={cn('w-2 h-2 rounded-full shrink-0', row.dotColor)} />
+                                      <span>{row.status}</span>
+                                    </td>
+                                    <td className="py-2.5 px-3 sm:px-4 text-center font-semibold text-slate-900">
+                                      {row.count}
+                                    </td>
+                                    <td className="py-2.5 px-3 sm:px-4 text-right text-slate-500 font-medium">
+                                      {row.share}
+                                    </td>
+                                  </tr>
+                                ))}
+                                {/* Total Row */}
+                                {visual.table.total && (
+                                  <tr className="bg-slate-50/40 font-bold text-slate-900 border-t border-slate-200">
+                                    <td className="py-2.5 px-3 sm:px-4">Total</td>
+                                    <td className="py-2.5 px-3 sm:px-4 text-center font-bold text-slate-900">
+                                      {visual.table.total.count}
+                                    </td>
+                                    <td className="py-2.5 px-3 sm:px-4 text-right font-bold text-slate-900">
+                                      {visual.table.total.share}
+                                    </td>
+                                  </tr>
+                                )}
+                              </tbody>
+                            </table>
+                          </div>
+                        )}
+
+                        {/* Live Data Footer & Collapsible Sources */}
+                        <div className="w-full flex items-center justify-between text-[10px] text-slate-400 pt-1">
+                          <span className="flex items-center gap-1.5 font-medium">
+                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                            Live database · {turn.timestamp}
+                          </span>
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() => copyResponse(turn)}
+                              title="Copy Answer"
+                              className="text-slate-400 hover:text-slate-700 p-1 cursor-pointer"
+                            >
+                              <Copy className="w-3.5 h-3.5" />
+                            </button>
+                            {turn.sourceCalls && turn.sourceCalls.length > 0 && (
+                              <button
+                                type="button"
+                                onClick={() => setShowSources((v) => !v)}
+                                className="text-slate-500 hover:text-slate-800 font-semibold flex items-center gap-1 cursor-pointer"
+                              >
+                                <span>{showSources ? 'Hide Sources' : `Sources (${turn.sourceCalls.length})`}</span>
+                                <ChevronDown className={cn('w-3 h-3 transition-transform', showSources && 'rotate-180')} />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Collapsible Source Calls (Clean Light Style without harsh black bg) */}
+                        {showSources && turn.sourceCalls && turn.sourceCalls.length > 0 && (
+                          <div className="w-full mt-2 p-2.5 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl text-[11px] font-mono space-y-1 animate-in fade-in">
+                            {turn.sourceCalls.map((call, cIdx) => (
+                              <div key={cIdx} className="flex items-center gap-2">
+                                <span className="px-1.5 py-0.5 bg-emerald-100 text-emerald-700 rounded font-bold text-[10px]">
+                                  {call.method || 'GET'}
+                                </span>
+                                <span className="text-slate-600 truncate">{call.target || call.endpoint || call.name}</span>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+
+                        {/* Action CTAs (Clean light pill buttons) */}
+                        {turn.actions && turn.actions.length > 0 && (
+                          <div className="flex flex-wrap items-center gap-2 pt-2">
+                            {turn.actions.map((act, aIdx) => (
+                              <button
+                                key={aIdx}
+                                type="button"
+                                onClick={() => navigate(act.path)}
+                                className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 hover:text-slate-900 border border-slate-200 text-[11px] font-semibold rounded-xl flex items-center gap-1.5 transition-all cursor-pointer shadow-3xs"
+                              >
+                                <span>{act.label}</span>
+                                <ArrowRight className="w-3 h-3 text-slate-500" />
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+                <div ref={messagesEndRef} />
+              </div>
+
+              {/* Thinking Spinner */}
+              {isThinking && (
+                <div className="py-3 flex items-center gap-2.5 text-xs text-slate-700 font-medium animate-pulse">
+                  <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                  <span>Analyzing live data across fleet & dispatch...</span>
+                </div>
+              )}
+
+              {/* Follow-up Prompt Box Input */}
+              <div className="w-full bg-white rounded-2xl border border-blue-500 focus-within:ring-2 focus-within:ring-blue-400/20 transition-all p-3">
+                <textarea
+                  ref={inputRef}
+                  rows={1}
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      handleAsk();
+                    }
+                  }}
+                  placeholder="Ask follow-up..."
+                  className="w-full bg-transparent border-none outline-none text-sm font-normal text-slate-800 placeholder:text-slate-400 placeholder:font-normal resize-none"
+                />
+
+                {/* Bottom Controls inside input box */}
+                <div className="flex items-center justify-between pt-1.5">
+                  {/* Left: Plus Action Menu */}
+                  <div className="relative">
+                    <button
+                      type="button"
+                      onClick={() => setPlusMenuOpen((v) => !v)}
+                      className="w-7 h-7 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 flex items-center justify-center transition-all active:scale-95 cursor-pointer"
+                    >
+                      <Plus className="w-3.5 h-3.5" />
+                    </button>
+
+                    {/* Plus Menu Popup & Backdrop */}
+                    {plusMenuOpen && (
+                      <>
+                        <div
+                          className="fixed inset-0 z-40 bg-transparent"
+                          onClick={() => setPlusMenuOpen(false)}
+                        />
+                        <div className="absolute left-0 bottom-full mb-2.5 w-60 bg-white border border-slate-200 rounded-2xl shadow-xl p-2 z-50 text-xs animate-in fade-in zoom-in-95">
+                          <button
+                            onClick={() => {
+                              setPlusMenuOpen(false);
+                              navigate('/doormile/orders/multiple');
+                            }}
+                            className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                          >
+                            <Upload className="w-4 h-4 text-blue-500" />
+                            Upload Bulk Sheet
+                          </button>
+                          <button
+                            onClick={() => {
+                              setPlusMenuOpen(false);
+                              navigate('/doormile/orders/create');
+                            }}
+                            className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                          >
+                            <Package className="w-4 h-4 text-emerald-500" />
+                            Create Single Order
+                          </button>
+                          <button
+                            onClick={() => {
+                              setPlusMenuOpen(false);
+                              navigate('/doormile/dispatch');
+                            }}
+                            className="w-full flex items-center gap-2.5 px-3 py-2.5 text-slate-700 hover:bg-slate-50 rounded-xl font-medium text-left cursor-pointer"
+                          >
+                            <Clock className="w-4 h-4 text-purple-500" />
+                            Launch Dispatch Board
+                          </button>
+                        </div>
+                      </>
+                    )}
+                  </div>
+
+                  {/* Right: Mic & Speak Button */}
+                  <div className="flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={toggleMic}
+                      className={cn(
+                        'p-1.5 rounded-full text-slate-400 hover:text-slate-600 transition-colors cursor-pointer',
+                        isListening && 'text-blue-600 bg-blue-50 ring-2 ring-blue-500/20 animate-pulse'
+                      )}
+                      title={isListening ? 'Listening...' : 'Voice Input'}
+                    >
+                      <Mic className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      type="button"
+                      onClick={() => handleAsk()}
+                      disabled={!query.trim() && !isThinking}
+                      className="px-4 py-1.5 rounded-full bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-1.5 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Send message"
+                    >
+                      <Send className="w-3.5 h-3.5" />
+                      <span>Send</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Suggestion Follow-Up Pills */}
+              <div className="mt-3.5 pt-2 border-t border-slate-100 flex flex-wrap items-center gap-2">
+                <span className="text-[11px] font-medium text-slate-400 mr-1">Suggested:</span>
+                {suggestions.map((sug) => (
+                  <button
+                    key={sug}
+                    type="button"
+                    onClick={() => handleAsk(sug)}
+                    className="px-3.5 py-1.5 bg-white hover:bg-slate-50 border border-slate-200/90 rounded-full text-xs font-medium text-slate-700 transition-all hover:border-slate-300 active:scale-95 cursor-pointer shadow-3xs"
+                  >
+                    {sug}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </motion.div>
+      </main>
+
+      {/* BOTTOM APP LAUNCHER & SUITES */}
+      <footer className="w-full pt-4 pb-2 border-t border-slate-100">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 max-w-5xl mx-auto">
+          
+          {/* 1. OPERATIONS */}
+          <div className="flex flex-col items-start">
+            <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-3 px-1">
+              OPERATIONS
+            </div>
+            <div className="flex items-start gap-2.5 sm:gap-3">
+              {/* Orders Tile */}
+              <Link
+                to="/doormile/orders"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="relative w-12 h-12 rounded-2xl bg-orange-50 border border-orange-200/90 flex items-center justify-center text-orange-500 group-hover:scale-105 group-hover:bg-orange-100 group-hover:shadow-sm transition-all duration-200">
+                  {/* The red "3" that sat here was a literal, not a count of
+                      anything. A red badge on a launcher tile means "this many
+                      things need you", and one that reads 3 forever trains
+                      operators to stop looking at badges — including the ones
+                      that will eventually be real. */}
+                  <Package className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Orders
+                </span>
+              </Link>
+
+              {/* Dispatch Tile */}
+              <Link
+                to="/doormile/dispatch"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-sky-50 border border-sky-200/90 flex items-center justify-center text-sky-500 group-hover:scale-105 group-hover:bg-sky-100 group-hover:shadow-sm transition-all duration-200">
+                  <Clock className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Dispatch
+                </span>
+              </Link>
+
+              {/* Tripsheets.
+                  Labelled "Task Board" until now, which named nothing in this
+                  product: the page it opens is Tripsheets, the nav calls it
+                  Tripsheets, and the domain object is a tripsheet. A launcher
+                  tile whose label does not match its destination costs the
+                  operator a click to find that out, every time. */}
+              <Link
+                to="/doormile/tripsheets"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-purple-50 border border-purple-200/90 flex items-center justify-center text-purple-500 group-hover:scale-105 group-hover:bg-purple-100 group-hover:shadow-sm transition-all duration-200">
+                  <ListTodo className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Tripsheets
+                </span>
+              </Link>
+            </div>
+          </div>
+
+          {/* 2. FLEET — Milers, their summary, and the exceptions register.
+                 Was "WORKFORCE SUITE", which reads like an HR product. Doormile
+                 does not have one; this group is the rider fleet. */}
+          <div className="flex flex-col items-start">
+            <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-3 px-1">
+              FLEET
+            </div>
+            <div className="flex items-start gap-2.5 sm:gap-3">
+              {/* Staff Directory */}
+              <Link
+                to="/doormile/milers"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-200/90 flex items-center justify-center text-emerald-500 group-hover:scale-105 group-hover:bg-emerald-100 group-hover:shadow-sm transition-all duration-200">
+                  <Users className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Milers
+                </span>
+              </Link>
+
+              {/* Milers Summary.
+                  Was labelled "Availability" and pointed at /doormile/milers —
+                  the same destination as the tile beside it, so two tiles
+                  opened one page. Availability is a column on that directory,
+                  not a page of its own. The report IS the on-duty view ("Fleet
+                  KPIs & on-duty shifts"), so it gets the tile and the name the
+                  nav already uses.
+
+                  The "38" badge is gone: nothing computed it. It was a literal
+                  in the markup sitting where a live on-duty count belongs, and
+                  a number nobody measured is worse than no number. */}
+              <Link
+                to="/doormile/reports/riderssummary"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="relative w-12 h-12 rounded-2xl bg-cyan-50 border border-cyan-200/90 flex items-center justify-center text-cyan-500 group-hover:scale-105 group-hover:bg-cyan-100 group-hover:shadow-sm transition-all duration-200">
+                  <Calendar className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Milers Summary
+                </span>
+              </Link>
+
+              {/* Exceptions.
+                  "Compliance" is not a thing this console has. The page is the
+                  exceptions register — live alerts and delivery blockers — and
+                  compliance is at most one category inside it, so the tile was
+                  promising a narrower page than it opens.
+
+                  The "7" badge is gone for the same reason as the "38": it was
+                  a hardcoded literal, not a count of open exceptions. A red
+                  badge is an instruction to act, and one that never changes
+                  teaches operators to ignore the real one. */}
+              <Link
+                to="/doormile/exceptions"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="relative w-12 h-12 rounded-2xl bg-amber-50 border border-amber-200/90 flex items-center justify-center text-amber-500 group-hover:scale-105 group-hover:bg-amber-100 group-hover:shadow-sm transition-all duration-200">
+                  <Shield className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Exceptions
+                </span>
+              </Link>
+            </div>
+          </div>
+
+          {/* 3. CLIENTS & REVENUE — Bookings, Profitability, Clients.
+                 Was "FINANCE & CRM", naming two systems this console is not:
+                 there is no invoicing and no CRM. These three are the B2C
+                 booking feed, the margin report and the tenant register. */}
+          <div className="flex flex-col items-start">
+            <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-3 px-1">
+              CLIENTS &amp; REVENUE
+            </div>
+            <div className="flex items-start gap-2.5 sm:gap-3">
+              {/* Bookings.
+                  Labelled "Invoices", which this console does not have — the
+                  page is the customer-app booking list. Billing lives on the
+                  Profitability report, not here. */}
+              <Link
+                to="/doormile/bookings"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="relative w-12 h-12 rounded-2xl bg-blue-50 border border-blue-200/90 flex items-center justify-center text-blue-500 group-hover:scale-105 group-hover:bg-blue-100 group-hover:shadow-sm transition-all duration-200">
+                  <FileText className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Bookings
+                </span>
+              </Link>
+
+              {/* Profitability.
+                  "Payroll" names a system Doormile does not run — the page is
+                  the gross-margin and variable-cost report. Rider earnings
+                  appear in it, which is probably where the name came from, but
+                  a tile promising payroll and opening a margin report is worse
+                  than one that says what it is. */}
+              <Link
+                to="/doormile/reports/profitability"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-200/90 flex items-center justify-center text-emerald-500 group-hover:scale-105 group-hover:bg-emerald-100 group-hover:shadow-sm transition-all duration-200">
+                  <Coins className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Profitability
+                </span>
+              </Link>
+
+              {/* Clients */}
+              <Link
+                to="/doormile/tenants"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-purple-50 border border-purple-200/90 flex items-center justify-center text-purple-500 group-hover:scale-105 group-hover:bg-purple-100 group-hover:shadow-sm transition-all duration-200">
+                  <Building2 className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Clients
+                </span>
+              </Link>
+            </div>
+          </div>
+
+          {/* 4. REPORTS & AI — one ordinary report and one assistant action.
+                 Was "AI TOOLS" over both. Orders Summary is a plain
+                 aggregation; only the agent rollup beside it goes near a
+                 model, and the heading now says so rather than lending the
+                 label to a page that computes sums. */}
+          <div className="flex flex-col items-start">
+            <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-3 px-1">
+              REPORTS &amp; AI
+            </div>
+            <div className="flex items-start gap-2.5 sm:gap-3">
+              {/* Orders Summary.
+                  Called "AI Reports", but nothing about the page it opens is
+                  AI — it is the daily volume and status aggregation, computed
+                  from the orders feed. Filing an ordinary report under "AI
+                  TOOLS" and branding it as such makes it harder to trust the
+                  parts of this console that really are model-driven. */}
+              <Link
+                to="/doormile/reports/orderssummary"
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="w-12 h-12 rounded-2xl bg-teal-50 border border-teal-200/90 flex items-center justify-center text-teal-500 group-hover:scale-105 group-hover:bg-teal-100 group-hover:shadow-sm transition-all duration-200">
+                  <FileSpreadsheet className="w-5 h-5" />
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  Orders Summary
+                </span>
+              </Link>
+
+              {/* All Agents */}
+              <button
+                type="button"
+                onClick={() => handleAsk('Summarize status across all 9 specialized agents')}
+                className="flex flex-col items-center group focus:outline-none w-18 text-center cursor-pointer"
+              >
+                <div className="relative w-12 h-12 rounded-2xl bg-indigo-50 border border-indigo-200/90 flex items-center justify-center text-indigo-600 group-hover:scale-105 group-hover:bg-indigo-100 group-hover:shadow-sm transition-all duration-200">
+                  <Sparkles className="w-5 h-5" />
+                  <span className="absolute -top-1.5 -right-1 px-1 py-0.5 bg-indigo-600 text-white font-bold text-[8px] rounded-full leading-none shadow-xs uppercase">
+                    AI
+                  </span>
+                </div>
+                <span className="text-[11px] sm:text-xs font-medium text-slate-700 group-hover:text-slate-900 mt-2 text-center truncate w-full transition-colors">
+                  All Agents
+                </span>
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/pages/doormile/orders/Orders.jsx b/src/pages/doormile/orders/Orders.jsx
index 3b79ddd..ee4c9d9 100644
--- a/src/pages/doormile/orders/Orders.jsx
+++ b/src/pages/doormile/orders/Orders.jsx
@@ -265,12 +265,12 @@ export default function Orders() {
 
   const handleManualAssign = async () => {
     if (!selectedRiderId || !selectedIds.length) {
-      OpenToast('Please select a rider first', 'warning');
+      OpenToast('Please select a miler first', 'warning');
       return;
     }
     const targetRider = riders.find((r) => String(r.userid || r.mileruserid || r.id) === String(selectedRiderId));
     if (!targetRider) {
-      OpenToast('Please select a valid rider', 'warning');
+      OpenToast('Please select a valid miler', 'warning');
       return;
     }
     const riderUserId = targetRider.userid || targetRider.mileruserid || targetRider.id;
@@ -284,7 +284,7 @@ export default function Orders() {
       if (targetRider.milerprofileid) {
         notifyMiler(targetRider.milerprofileid, 'DoormileXpress', `${selectedIds.length} orders assigned to you`).catch(() => {});
       }
-      OpenToast(`${selectedIds.length} order${selectedIds.length === 1 ? '' : 's'} assigned to ${targetRider.displayname || targetRider.name || 'rider'}`, 'success');
+      OpenToast(`${selectedIds.length} order${selectedIds.length === 1 ? '' : 's'} assigned to ${targetRider.displayname || targetRider.name || 'miler'}`, 'success');
       refetchOrders();
       setSelectedIds([]);
       setManualAssignOpen(false);
@@ -302,6 +302,7 @@ export default function Orders() {
         key: 'bookingno',
         header: 'Order',
         sortable: true,
+        width: '130px',
         accessor: (row) => row.bookingno || `#${row.bookingid}`,
         cell: (row) => {
           const created = parseDoormileTimestamp(row.createdat);
@@ -320,6 +321,8 @@ export default function Orders() {
       {
         key: 'route',
         header: 'Route (pickup → drop)',
+        width: '260px',
+        className: 'max-w-[260px]',
         sortValue: (row) => row.pickupaddress || '',
         cell: (row) => {
           const customer = customerMap.get(row.appcustomerid);
@@ -335,7 +338,7 @@ export default function Orders() {
           const flow = classifyBooking(row, flowAnchors);
           const isCustomerPickup = flow.flow !== FLOW.FORWARD && flow.pickupSource === 'customer';
           return (
-            <div className="min-w-0">
+            <div className="max-w-[260px] min-w-0 overflow-hidden">
               <p className="truncate text-body-sm text-ink-2" title={row.pickupaddress || ''}>
                 <span className={isCustomerPickup ? 'font-medium text-violet-700' : 'font-medium text-ink-1'}>
                   {isCustomerPickup ? 'Customer pickup' : 'Pickup'}
@@ -366,6 +369,7 @@ export default function Orders() {
         key: 'kms',
         header: 'Km',
         align: 'center',
+        width: '75px',
         sortValue: (row) =>
           haversineKm(row.pickuplatitude, row.pickuplongitude, row.deliverylatitude, row.deliverylongitude) ?? -1,
         accessor: (row) =>
@@ -376,6 +380,7 @@ export default function Orders() {
         key: 'charges',
         header: 'Charges',
         align: 'right',
+        width: '90px',
         sortValue: (row) => Number(chargeOf(row)) || 0,
         accessor: (row) => currency(chargeOf(row)),
         hideBelow: 'md',
@@ -383,6 +388,7 @@ export default function Orders() {
       {
         key: 'status',
         header: 'Status',
+        width: '130px',
         sortable: true,
         cell: (row) => {
           const rawStatus = String(row.status || '').trim().toLowerCase();
@@ -637,22 +643,22 @@ export default function Orders() {
         open={manualAssignOpen}
         onOpenChange={setManualAssignOpen}
         title={`Manual Assign ${selectedIds.length} Order${selectedIds.length === 1 ? '' : 's'}`}
-        description="Choose an active rider to assign the selected orders directly."
+        description="Choose an active miler to assign the selected orders directly."
       >
         <div className="space-y-4 pt-2">
           <div>
             <label className="block text-xs font-semibold text-slate-800 mb-1.5">
-              Select Rider <span className="text-red-500">*</span>
+              Select Miler <span className="text-red-500">*</span>
             </label>
             <select
               value={selectedRiderId}
               onChange={(e) => setSelectedRiderId(e.target.value)}
               className="w-full h-10 px-3 bg-white border border-slate-200 rounded-lg text-xs font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black"
             >
-              <option value="">-- Choose an available rider --</option>
+              <option value="">-- Choose an available miler --</option>
               {riders.map((r) => {
                 const rId = String(r.userid || r.mileruserid || r.id);
-                const rName = r.displayname || r.name || `Rider #${rId}`;
+                const rName = r.displayname || r.name || `Miler #${rId}`;
                 const rPhone = r.mobile || r.phone ? ` · ${r.mobile || r.phone}` : '';
                 const rStatus = r.status ? ` [${r.status}]` : '';
                 return (
diff --git a/src/pages/doormile/orders/OrdersPreview.jsx b/src/pages/doormile/orders/OrdersPreview.jsx
index eb576e8..86426c1 100644
--- a/src/pages/doormile/orders/OrdersPreview.jsx
+++ b/src/pages/doormile/orders/OrdersPreview.jsx
@@ -164,7 +164,7 @@ export default function OrdersPreview() {
       },
       {
         key: 'rider',
-        header: 'Rider',
+        header: 'Miler',
         cell: (row) => (
           <Select
             value={row.userid ? String(row.userid) : ''}
@@ -194,7 +194,7 @@ export default function OrdersPreview() {
       <PageHeader
         icon={Package}
         title="Assignment preview"
-        subtitle="Nothing is committed until you assign — riders can still be changed here"
+        subtitle="Nothing is committed until you assign — milers can still be changed here"
         actions={
           <>
             <Button variant="outline" onClick={() => navigate('/doormile/orders')}>
@@ -213,7 +213,7 @@ export default function OrdersPreview() {
 
       <Grid cols={4}>
         <KpiCard icon={Package} value={number(stats.orders, '0')} label="Orders" tone="brand" index={0} />
-        <KpiCard icon={Bike} value={number(stats.riders, '0')} label="Riders" tone="navy" index={1} />
+        <KpiCard icon={Bike} value={number(stats.riders, '0')} label="Milers" tone="navy" index={1} />
         <KpiCard icon={Package} value={formatKm(stats.kms)} label="Total distance" tone="accent" index={2} />
         <KpiCard icon={Package} value={currency(stats.amount, '₹0')} label="Total charge" tone="success" index={3} />
       </Grid>
diff --git a/src/pages/doormile/reports/OrdersDetails.jsx b/src/pages/doormile/reports/OrdersDetails.jsx
index 9f84dca..b741763 100644
--- a/src/pages/doormile/reports/OrdersDetails.jsx
+++ b/src/pages/doormile/reports/OrdersDetails.jsx
@@ -116,7 +116,7 @@ export default function OrdersDetails() {
       },
       {
         key: 'ridername',
-        header: 'Rider',
+        header: 'Miler',
         sortable: true,
         accessor: (row) => orDash(row.ridername),
         hideBelow: 'md',
@@ -153,7 +153,7 @@ export default function OrdersDetails() {
     { key: 'deliverycustomer', header: 'Customer' },
     { key: 'pickupaddress', header: 'Pickup' },
     { key: 'deliveryaddress', header: 'Drop' },
-    { key: 'ridername', header: 'Rider' },
+    { key: 'ridername', header: 'Miler' },
     { key: 'kms', header: 'Km' },
     { key: 'deliverycharges', header: 'Amount' },
     { key: 'orderstatus', header: 'Status' },
@@ -217,10 +217,10 @@ export default function OrdersDetails() {
 
           <Select value={riderId} onValueChange={setRiderId}>
             <SelectTrigger className="w-full sm:w-48">
-              <SelectValue placeholder="All riders" />
+              <SelectValue placeholder="All milers" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value={ALL}>All riders</SelectItem>
+              <SelectItem value={ALL}>All milers</SelectItem>
               {(riders || []).map((rider) => (
                 <SelectItem key={rider.userid} value={String(rider.userid)}>
                   {rider.label}
diff --git a/src/pages/doormile/reports/Profitability.jsx b/src/pages/doormile/reports/Profitability.jsx
index 33cf749..c97ceda 100644
--- a/src/pages/doormile/reports/Profitability.jsx
+++ b/src/pages/doormile/reports/Profitability.jsx
@@ -85,7 +85,7 @@ export default function Profitability() {
     () => [
       {
         key: 'riderName',
-        header: 'Rider',
+        header: 'Miler',
         sortable: true,
         cell: (row) => (
           <div className="min-w-0">
diff --git a/src/pages/doormile/reports/RidersSummary.jsx b/src/pages/doormile/reports/RidersSummary.jsx
index a6c1328..c15cb5f 100644
--- a/src/pages/doormile/reports/RidersSummary.jsx
+++ b/src/pages/doormile/reports/RidersSummary.jsx
@@ -58,11 +58,11 @@ export default function RidersSummary() {
     () => [
       {
         key: 'displayname',
-        header: 'Rider',
+        header: 'Miler',
         sortable: true,
         cell: (row) => (
           <div className="min-w-0">
-            <p className="truncate text-body-sm font-semibold text-ink-1">{row.displayname || `Rider #${row.userid}`}</p>
+            <p className="truncate text-body-sm font-semibold text-ink-1">{row.displayname || `Miler #${row.userid}`}</p>
             <p className="text-caption text-ink-3">{row.hubname || row.phone || '—'}</p>
           </div>
         ),
@@ -120,7 +120,7 @@ export default function RidersSummary() {
     <Stack space="lg">
       <PageHeader
         icon={Bike}
-        title="Riders summary"
+        title="Milers summary"
         subtitle={`${range.from === range.to ? range.from : `${range.from} → ${range.to}`}`}
         actions={
           <>
@@ -143,7 +143,7 @@ export default function RidersSummary() {
       />
 
       <Grid cols={4}>
-        <KpiCard icon={Bike} value={number(stats.riders, '0')} label="Riders active" tone="brand" index={0} loading={isLoading} />
+        <KpiCard icon={Bike} value={number(stats.riders, '0')} label="Milers active" tone="brand" index={0} loading={isLoading} />
         <KpiCard icon={Package} value={number(stats.orders, '0')} label="Orders assigned" tone="navy" index={1} loading={isLoading} />
         <KpiCard
           icon={CheckCircle2}
@@ -156,7 +156,7 @@ export default function RidersSummary() {
         <KpiCard
           icon={IndianRupee}
           value={currency(stats.amount, '₹0')}
-          label="Rider charges"
+          label="Miler charges"
           tone="accent"
           index={3}
           loading={isLoading}
@@ -167,12 +167,12 @@ export default function RidersSummary() {
         <ListToolbar
           search={search}
           onSearchChange={setSearch}
-          placeholder="Search by rider, phone or hub"
-          count={{ shown: rows.length, total: (summary || []).length, noun: 'riders' }}
+          placeholder="Search by miler, phone or hub"
+          count={{ shown: rows.length, total: (summary || []).length, noun: 'milers' }}
           actions={
             <Button
               variant="ghost"
-              onClick={() => exportRows(rows, columns, `riders-summary-${range.from}`)}
+              onClick={() => exportRows(rows, columns, `milers-summary-${range.from}`)}
               disabled={rows.length === 0}
             >
               <FileSpreadsheet className="mr-1.5 h-4 w-4" /> Export
@@ -210,7 +210,7 @@ export default function RidersSummary() {
             <EmptyState
               icon={Bike}
               title="Nothing in this range"
-              description="No rider activity was recorded for the dates selected."
+              description="No miler activity was recorded for the dates selected."
             />
           }
         />
diff --git a/src/pages/doormile/riders/EditRider.jsx b/src/pages/doormile/riders/EditRider.jsx
index 61b6196..d6c0dfc 100644
--- a/src/pages/doormile/riders/EditRider.jsx
+++ b/src/pages/doormile/riders/EditRider.jsx
@@ -58,13 +58,13 @@ export default function EditRider() {
   if (!milerProfileId) {
     return (
       <Stack space="lg">
-        <PageHeader icon={Bike} title="Edit rider" />
+        <PageHeader icon={Bike} title="Edit miler" />
         <Alert
           tone="warning"
-          title="No rider selected"
-          action={<Button onClick={() => navigate('/doormile/riders')}>Go to Riders</Button>}
+          title="No miler selected"
+          action={<Button onClick={() => navigate('/doormile/milers')}>Go to Milers</Button>}
         >
-          Open a rider from the Riders table — this page needs the record that was clicked.
+          Open a miler from the Milers table — this page needs the record that was clicked.
         </Alert>
       </Stack>
     );
@@ -114,7 +114,7 @@ export default function EditRider() {
       />
 
       {isLoading && !form ? (
-        <LoadingState message="Loading rider…" />
+        <LoadingState message="Loading miler…" />
       ) : (
         <form onSubmit={submit}>
           <Surface radius="xl" padding="lg">
@@ -176,7 +176,7 @@ export default function EditRider() {
             </div>
 
             <div className="mt-6 flex justify-end gap-2 border-t border-border pt-5">
-              <Button type="button" variant="ghost" onClick={() => navigate('/doormile/riders')}>
+              <Button type="button" variant="ghost" onClick={() => navigate('/doormile/milers')}>
                 Cancel
               </Button>
               <Button type="submit" loading={updateMiler.isPending}>
diff --git a/src/pages/doormile/riders/Riders.jsx b/src/pages/doormile/riders/Riders.jsx
index 2a87f1a..331a53c 100644
--- a/src/pages/doormile/riders/Riders.jsx
+++ b/src/pages/doormile/riders/Riders.jsx
@@ -95,7 +95,7 @@ export default function Riders() {
     () => [
       {
         key: 'rider',
-        header: 'Rider',
+        header: 'Miler',
         sortable: true,
         accessor: riderName,
         cell: (row) => (
@@ -283,8 +283,8 @@ export default function Riders() {
 
         <p className="text-caption text-ink-3">
           {rows.length === (counts[tab] ?? counts.all)
-            ? `${counts[tab] ?? counts.all} riders`
-            : `${rows.length} of ${counts[tab] ?? counts.all} riders`}
+            ? `${counts[tab] ?? counts.all} milers`
+            : `${rows.length} of ${counts[tab] ?? counts.all} milers`}
         </p>
 
         <DataTable
@@ -301,9 +301,9 @@ export default function Riders() {
             debouncedSearch ? undefined : (
               <EmptyState
                 icon={Bike}
-                title="No riders here"
-                description="Onboard a rider to start assigning deliveries."
-                action={{ label: 'New rider', icon: Plus, onClick: () => navigate('/doormile/riders/create') }}
+                title="No milers here"
+                description="Onboard a miler to start assigning deliveries."
+                action={{ label: 'New miler', icon: Plus, onClick: () => navigate('/doormile/milers/create') }}
               />
             )
           }
@@ -313,9 +313,9 @@ export default function Riders() {
       <ConfirmModal
         open={Boolean(blockRow)}
         onOpenChange={(open) => !open && setBlockRow(null)}
-        title="Block this rider?"
+        title="Block this miler?"
         description={`${riderName(blockRow || {})} will stop receiving assignments until they are unblocked.`}
-        confirmLabel="Block rider"
+        confirmLabel="Block miler"
         busy={blockMiler.isPending}
         onConfirm={() => {
           blockMiler.mutate(
@@ -371,8 +371,8 @@ export default function Riders() {
       <Modal
         open={Boolean(notifyRow)}
         onOpenChange={(open) => !open && setNotifyRow(null)}
-        title="Notify this rider"
-        description={`${riderName(notifyRow || {})} — delivered to the rider app as a push notification.`}
+        title="Notify this miler"
+        description={`${riderName(notifyRow || {})} — delivered to the miler app as a push notification.`}
         icon={Bell}
         busy={notifyMiler.isPending}
         footer={
diff --git a/src/pages/doormile/tripsheets/Tripsheets.jsx b/src/pages/doormile/tripsheets/Tripsheets.jsx
index f8483db..079085f 100644
--- a/src/pages/doormile/tripsheets/Tripsheets.jsx
+++ b/src/pages/doormile/tripsheets/Tripsheets.jsx
@@ -356,7 +356,7 @@ export default function Tripsheets() {
                 <SelectItem value={NO_DRIVER}>No driver</SelectItem>
                 {(milers || []).map((miler) => (
                   <SelectItem key={miler.userid} value={String(miler.userid)}>
-                    {miler.displayname || miler.authname || `Rider #${miler.userid}`}
+                    {miler.displayname || miler.authname || `Miler #${miler.userid}`}
                   </SelectItem>
                 ))}
               </SelectContent>
diff --git a/src/pages/doormile/vehicles/Vehicles.jsx b/src/pages/doormile/vehicles/Vehicles.jsx
index a4e3840..11e81db 100644
--- a/src/pages/doormile/vehicles/Vehicles.jsx
+++ b/src/pages/doormile/vehicles/Vehicles.jsx
@@ -211,7 +211,7 @@ export default function Vehicles() {
       <PageHeader
         icon={Car}
         title="Vehicles"
-        subtitle="The fleet register riders are assigned from"
+        subtitle="The fleet register milers are assigned from"
         actions={
           <Button onClick={openCreate}>
             <Plus className="mr-1.5 h-4 w-4" /> New vehicle
@@ -284,7 +284,7 @@ export default function Vehicles() {
               <EmptyState
                 icon={Car}
                 title="No vehicles yet"
-                description="Register the first vehicle so riders have something to be assigned to."
+                description="Register the first vehicle so milers have something to be assigned to."
                 action={{ label: 'New vehicle', icon: Plus, onClick: openCreate }}
               />
             )
diff --git a/src/utils/locales/en.json b/src/utils/locales/en.json
index 7497109..16a03ed 100644
--- a/src/utils/locales/en.json
+++ b/src/utils/locales/en.json
@@ -7,13 +7,13 @@
   "orders": "Orders",
   "orderspreview": "Orders Preview",
   "deliveries": "Deliveries",
-  "riders": "Riders",
+  "riders": "Milers",
   "tenants": "Tenants",
   "pricing": "Pricing",
   "reports": "Reports",
   "ordersummary": "Orders Summary",
   "ordersdetails": "Orders Details",
-  "riderssummary": "Riders Summary",
+  "riderssummary": "Milers Summary",
   "profitability": "Profitability",
   "dispatch": "Dispatch",
   "customers": "Customers",
diff --git a/tests/lib/Tabs.test.jsx b/tests/lib/Tabs.test.jsx
new file mode 100644
index 0000000..25382e0
--- /dev/null
+++ b/tests/lib/Tabs.test.jsx
@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// framer-motion's layout animations need a real layout engine; jsdom has none.
+// The sliding indicator is not what this file is about, so it is stubbed to a
+// plain span and the structural assertions below stay meaningful.
+jest.mock('framer-motion', () => ({
+  motion: {
+    span: ({ layoutId, transition, ...rest }) => <span data-testid="indicator" {...rest} />,
+  },
+}));
+
+import { Tabs } from '@/components/ds/Tabs';
+
+/**
+ * The tab strip must stay reachable when it is wider than its container.
+ *
+ * Deliveries renders ten status tabs — roughly 1050px — and the assistant dock
+ * takes 30% of the viewport back, 40% expanded, and opens by default above
+ * 1024px. The last two tabs, Delivered and Cancelled, were not merely clipped:
+ * with nothing scrollable around them there was no gesture that could bring
+ * them back. Four of the six pages using this component had hand-rolled their
+ * own wrapper; the two that had not were broken.
+ *
+ * jsdom does not lay anything out, so these assert the STRUCTURE that makes
+ * scrolling possible rather than the scrolling itself. That is the part that
+ * regressed — the wrapper was deleted from Deliveries.jsx — so it is the part
+ * worth pinning.
+ */
+
+// The real strip from Deliveries, in order.
+const DELIVERY_TABS = [
+  { value: 'all', label: 'All', count: 39 },
+  { value: 'pending', label: 'Pending', count: 32 },
+  { value: 'accepted', label: 'Accepted', count: 3 },
+  { value: 'arrived', label: 'Arrived', count: 0 },
+  { value: 'picked', label: 'Picked', count: 0 },
+  { value: 'active', label: 'Active', count: 1 },
+  { value: 'skipped', label: 'Skipped', count: 0 },
+  { value: 'delivered', label: 'Delivered', count: 3 },
+  { value: 'cancelled', label: 'Cancelled', count: 0 },
+];
+
+const trackOf = (container) => container.querySelector('.overflow-x-auto');
+
+describe('Tabs — overflow', () => {
+  it.each(['pill', 'underline'])('wraps the %s strip in its own scroll track', (variant) => {
+    const { container } = render(
+      <Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} variant={variant} />
+    );
+
+    const track = trackOf(container);
+    expect(track).not.toBeNull();
+    // max-w-full bounds it; min-w-0 is what actually lets a flex item shrink
+    // below its content width instead of overflowing the page.
+    expect(track.className).toContain('max-w-full');
+    expect(track.className).toContain('min-w-0');
+  });
+
+  it('puts the tablist inside the track, not around it', () => {
+    const { container } = render(<Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} />);
+    const track = trackOf(container);
+    expect(track.querySelector('[role="tablist"]')).not.toBeNull();
+  });
+
+  it('keeps every tab at its natural width so the row overflows rather than squashing', () => {
+    render(<Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} />);
+    screen.getAllByRole('tab').forEach((tab) => {
+      // Without shrink-0 the flex row compresses ten tabs into the available
+      // width and the track has nothing to scroll.
+      expect(tab.className).toContain('shrink-0');
+    });
+  });
+
+  it('gives the focus ring room to escape the clip', () => {
+    // overflow-x clips the ring on the first and last tab. The negative margin
+    // paired with equal padding buys it space without moving the strip, and is
+    // what makes the wrapper safe to nest inside the four pages that still
+    // have their own.
+    const { container } = render(<Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} />);
+    const track = trackOf(container);
+    expect(track.className).toContain('-mx-1');
+    expect(track.className).toContain('px-1');
+  });
+});
+
+describe('Tabs — reachability', () => {
+  it('renders the tabs that were cut off, Delivered and Cancelled included', () => {
+    render(<Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(DELIVERY_TABS.length);
+    expect(screen.getByRole('tab', { name: /Delivered/ })).toBeTruthy();
+    expect(screen.getByRole('tab', { name: /Cancelled/ })).toBeTruthy();
+  });
+
+  it('selects a tab at the far end of the strip', () => {
+    const Harness = () => {
+      const [tab, setTab] = useState('all');
+      return (
+        <>
+          <Tabs tabs={DELIVERY_TABS} value={tab} onChange={setTab} />
+          <output data-testid="selected">{tab}</output>
+        </>
+      );
+    };
+    render(<Harness />);
+
+    fireEvent.click(screen.getByRole('tab', { name: /Cancelled/ }));
+    expect(screen.getByTestId('selected').textContent).toBe('cancelled');
+    expect(screen.getByRole('tab', { name: /Cancelled/ }).getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('scrolls the selected tab into view without touching the page', () => {
+    // scrollIntoView walks every scrollable ancestor and would yank the whole
+    // document when the strip sits below the fold; the component moves the
+    // track's own scrollLeft instead. Fail loudly if that ever changes.
+    const scrollIntoView = jest.fn();
+    const original = window.HTMLElement.prototype.scrollIntoView;
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoView;
+    try {
+      render(<Tabs tabs={DELIVERY_TABS} value="cancelled" onChange={() => {}} />);
+      expect(scrollIntoView).not.toHaveBeenCalled();
+    } finally {
+      window.HTMLElement.prototype.scrollIntoView = original;
+    }
+  });
+});
+
+describe('Tabs — unchanged behaviour', () => {
+  it('still accepts plain strings', () => {
+    render(<Tabs tabs={['One', 'Two']} value="One" onChange={() => {}} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(2);
+  });
+
+  it('still forwards className to the tablist, not the track', () => {
+    // The four pages that wrap Tabs themselves pass `shrink-0` through this.
+    const { container } = render(
+      <Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} className="shrink-0" />
+    );
+    expect(container.querySelector('[role="tablist"]').className).toContain('shrink-0');
+    expect(trackOf(container).className).not.toContain('shrink-0');
+  });
+
+  it('still renders counts', () => {
+    render(<Tabs tabs={DELIVERY_TABS} value="all" onChange={() => {}} />);
+    expect(screen.getByRole('tab', { name: /All/ }).textContent).toContain('39');
+  });
+});