From d340f175814d271cf4fca47758afa1b432ab1348 Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Fri, 8 May 2026 08:05:15 -0700
Subject: [PATCH 1/9] update results top bar to match hifi controls

Align the results header with the mock by using a compact app label plus Save/Export actions while preserving the existing sidebar toggle and pending-edit cancel behavior.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/ui/src/app/results/page.tsx | 81 ++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 36 deletions(-)

diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index 342a582c..bace482c 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -122,49 +122,58 @@ export default function ResultsPage() {
         </div>
       )}{" "}
       {/* Map container switched to h-screen and added overflow hidden so the page is forced to be exactly one screen tall, whereas before the page was allowed to get taller than browser window leading to a long scroll */}
-      <header className="flex items-center gap-2 p-4 shrink-0 border-b border-zinc-200 bg-white">
-        <button
-          type="button"
-          onClick={() => setIsSidebarOpen((prev) => !prev)}
-          className="flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50"
-          aria-label={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
-        >
-          <svg
-            className="h-5 w-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden
+      <header className="flex items-center justify-between gap-3 p-4 shrink-0 border-b border-zinc-200 bg-white">
+        <div className="flex items-center gap-3 min-w-0">
+          <button
+            type="button"
+            onClick={() => setIsSidebarOpen((prev) => !prev)}
+            className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50"
+            aria-label={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-        </button>
-        <h1 className="text-2xl font-semibold text-zinc-800">
-          Results – Route map
-        </h1>
-        {pendingPinMove != null && (
-          <div className="ml-auto flex items-center gap-2">
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+          <p className="truncate text-sm font-semibold tracking-wide text-zinc-800 uppercase">
+            Delivery Optimizer
+          </p>
+        </div>
+
+        <div className="ml-auto flex items-center gap-2">
+          {pendingPinMove != null && (
             <button
               type="button"
               onClick={cancelPendingPinMove}
-              className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50"
+              className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
             >
               Cancel
             </button>
-            <button
-              type="button"
-              onClick={savePendingPinMove}
-              className="rounded-md bg-amber-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-amber-600"
-            >
-              Save
-            </button>
-          </div>
-        )}
+          )}
+          <button
+            type="button"
+            onClick={savePendingPinMove}
+            className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            className="rounded-full bg-emerald-500 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-600"
+          >
+            Export
+          </button>
+        </div>
       </header>
       <div className="flex flex-1 min-h-0">
         <div

From 21086a672bec337481948f0fc01b9809a3f92d9a Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 13:30:35 -0700
Subject: [PATCH 2/9] Address Results top bar review feedback

Show Save/Cancel only when a pin move is pending, disable Export until
export modal ships, and restore a screen-reader Results heading.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/ui/src/app/results/page.tsx | 44 +++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index bace482c..e10535bd 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -145,31 +145,39 @@ export default function ResultsPage() {
               />
             </svg>
           </button>
-          <p className="truncate text-sm font-semibold tracking-wide text-zinc-800 uppercase">
-            Delivery Optimizer
-          </p>
+          <div className="min-w-0">
+            <span className="block truncate text-sm font-semibold tracking-wide text-zinc-800 uppercase">
+              Delivery Optimizer
+            </span>
+            <h1 className="sr-only">Results</h1>
+          </div>
         </div>
 
         <div className="ml-auto flex items-center gap-2">
           {pendingPinMove != null && (
-            <button
-              type="button"
-              onClick={cancelPendingPinMove}
-              className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
-            >
-              Cancel
-            </button>
+            <>
+              <button
+                type="button"
+                onClick={cancelPendingPinMove}
+                className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={savePendingPinMove}
+                className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+              >
+                Save
+              </button>
+            </>
           )}
           <button
             type="button"
-            onClick={savePendingPinMove}
-            className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
-          >
-            Save
-          </button>
-          <button
-            type="button"
-            className="rounded-full bg-emerald-500 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-600"
+            disabled
+            aria-disabled="true"
+            title="Export coming soon"
+            className="rounded-full bg-emerald-500 px-3 py-1 text-xs font-medium text-white opacity-50 cursor-not-allowed"
           >
             Export
           </button>

From 58c2bcefad405b90e74bd6f7f61d22735cc12e6c Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 14:32:02 -0700
Subject: [PATCH 3/9] Rebase step2-routes-panel onto upstream/main

Replay the full pre-rebase results stack (route colors, map polylines,
top bar, left strip, routes panel) on current upstream/main in one
commit to avoid conflicts with directions work already merged upstream.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/layout/sidebar/Sidebar.tsx     |   5 +-
 .../layout/sidebar/SidebarResultsButton.tsx   |  53 +++-
 .../src/app/edit/utils/hasOptimizeResults.ts  |  16 ++
 app/ui/src/app/results/components/Sidebar.tsx | 265 +++++++++---------
 app/ui/src/app/results/page.tsx               |  13 +-
 app/ui/src/app/results/types.ts               |   1 -
 6 files changed, 211 insertions(+), 142 deletions(-)
 create mode 100644 app/ui/src/app/edit/utils/hasOptimizeResults.ts

diff --git a/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx b/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
index d7d55f8b..a48a5187 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
@@ -2,11 +2,12 @@ import { SIDEBAR_ROOT, SIDEBAR_NAV } from "@/app/edit/formStyles.v2";
 
 type SidebarProps = {
   children: React.ReactNode;
+  className?: string;
 };
 
-export default function Sidebar({ children }: SidebarProps) {
+export default function Sidebar({ children, className }: SidebarProps) {
   return (
-    <aside className={SIDEBAR_ROOT}>
+    <aside className={className ? `${SIDEBAR_ROOT} ${className}` : SIDEBAR_ROOT}>
       <div className={SIDEBAR_NAV}>{children}</div>
     </aside>
   );
diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index b3fb88cf..3ad12982 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -1,7 +1,16 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { readHasOptimizeResults } from "../../utils/hasOptimizeResults";
 import {
+  SIDEBAR_NAV_ITEM,
+  SIDEBAR_NAV_ITEM_ACTIVE,
   SIDEBAR_NAV_ITEM_DISABLED,
+  SIDEBAR_NAV_LABEL_ACTIVE,
   SIDEBAR_NAV_LABEL_INACTIVE,
+  SIDEBAR_NAV_PILL_ACTIVE,
   SIDEBAR_NAV_PILL_INACTIVE,
 } from "@/app/edit/formStyles.v2";
 
@@ -12,26 +21,50 @@ const SIDEBAR_RESULTS_ICON = (
     height="24"
     viewBox="0 0 24 24"
     fill="none"
+    aria-hidden
   >
     <path
       d="M4.35 20.7C4.01667 20.8333 3.70833 20.7958 3.425 20.5875C3.14167 20.3792 3 20.1 3 19.75V5.75C3 5.53333 3.0625 5.34167 3.1875 5.175C3.3125 5.00833 3.48333 4.88333 3.7 4.8L9 3L15 5.1L19.65 3.3C19.9833 3.16667 20.2917 3.20417 20.575 3.4125C20.8583 3.62083 21 3.9 21 4.25V12.675C20.75 12.2917 20.4542 11.9417 20.1125 11.625C19.7708 11.3083 19.4 11.0333 19 10.8V5.7L16 6.85V10C15.65 10 15.3083 10.0292 14.975 10.0875C14.6417 10.1458 14.3167 10.2333 14 10.35V6.85L10 5.45V18.525L4.35 20.7ZM5 18.3L8 17.15V5.45L5 6.45V18.3ZM17.4125 17.5C17.7875 17.1667 17.9833 16.6667 18 16C18.0167 15.4333 17.8292 14.9583 17.4375 14.575C17.0458 14.1917 16.5667 14 16 14C15.4333 14 14.9583 14.1917 14.575 14.575C14.1917 14.9583 14 15.4333 14 16C14 16.5667 14.1917 17.0417 14.575 17.425C14.9583 17.8083 15.4333 18 16 18C16.5667 18 17.0375 17.8333 17.4125 17.5ZM16 20C14.9 20 13.9583 19.6083 13.175 18.825C12.3917 18.0417 12 17.1 12 16C12 14.9 12.3917 13.9583 13.175 13.175C13.9583 12.3917 14.9 12 16 12C17.1 12 18.0417 12.3917 18.825 13.175C19.6083 13.9583 20 14.9 20 16C20 16.3833 19.9542 16.7458 19.8625 17.0875C19.7708 17.4292 19.6333 17.75 19.45 18.05L22 20.6L20.6 22L18.05 19.45C17.75 19.6333 17.4292 19.7708 17.0875 19.8625C16.7458 19.9542 16.3833 20 16 20Z"
-      fill="var(--edit-text-primary)"
+      fill="currentColor"
     />
   </svg>
 );
 
 export default function SidebarResultsButton() {
+  const pathname = usePathname();
+  const isResultsPage = pathname === "/results";
+  const [hasStoredRoutes, setHasStoredRoutes] = useState(false);
+
+  useEffect(() => {
+    setHasStoredRoutes(readHasOptimizeResults());
+  }, []);
+
+  if (isResultsPage) {
+    return (
+      <span className={SIDEBAR_NAV_ITEM_ACTIVE} aria-current="page">
+        <span
+          className={`${SIDEBAR_NAV_PILL_ACTIVE} text-[var(--edit-foreground)]`}
+        >
+          {SIDEBAR_RESULTS_ICON}
+        </span>
+        <span className={SIDEBAR_NAV_LABEL_ACTIVE}>Results</span>
+      </span>
+    );
+  }
+
+  if (hasStoredRoutes) {
+    return (
+      <Link href="/results" className={SIDEBAR_NAV_ITEM}>
+        <span className={SIDEBAR_NAV_PILL_INACTIVE}>{SIDEBAR_RESULTS_ICON}</span>
+        <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Results</span>
+      </Link>
+    );
+  }
+
   return (
-    <Link
-      href="#"
-      className={SIDEBAR_NAV_ITEM_DISABLED}
-      aria-disabled="true"
-      tabIndex={-1}
-    >
-      {" "}
-      {/* TODO: add results page link when at least one route exists */}
+    <span className={SIDEBAR_NAV_ITEM_DISABLED} aria-disabled="true">
       <span className={SIDEBAR_NAV_PILL_INACTIVE}>{SIDEBAR_RESULTS_ICON}</span>
       <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Results</span>
-    </Link>
+    </span>
   );
 }
diff --git a/app/ui/src/app/edit/utils/hasOptimizeResults.ts b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
new file mode 100644
index 00000000..583f388c
--- /dev/null
+++ b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
@@ -0,0 +1,16 @@
+import type { Route } from "@/app/results/types";
+
+/** True when sessionStorage has at least one route ready for /results. */
+export function readHasOptimizeResults(): boolean {
+  if (typeof window === "undefined") return false;
+
+  const stored = sessionStorage.getItem("optimizeResults");
+  if (!stored) return false;
+
+  try {
+    const parsed = JSON.parse(stored) as Route[];
+    return Array.isArray(parsed) && parsed.length > 0;
+  } catch {
+    return false;
+  }
+}
diff --git a/app/ui/src/app/results/components/Sidebar.tsx b/app/ui/src/app/results/components/Sidebar.tsx
index 76a6bed9..bb66eb2b 100644
--- a/app/ui/src/app/results/components/Sidebar.tsx
+++ b/app/ui/src/app/results/components/Sidebar.tsx
@@ -48,151 +48,160 @@ export default function Sidebar({
     <aside
       className={`w-full h-full flex flex-col overflow-hidden border-r-2 bg-white p-4 ${isEditMode ? "border-amber-500" : "border-zinc-200"}`}
     >
-      {isEditMode && (
-        <p className="mb-2 text-xs font-medium text-amber-700 bg-amber-50 rounded px-2 py-1">
-          Edit Mode Active
-        </p>
-      )}
-      <div className="flex shrink-0 items-center justify-between gap-2 mb-4">
-        <span className="text-sm font-medium text-zinc-700">Edit mode</span>
+      <div className="flex shrink-0 items-start justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold text-zinc-800">
+            Optimized Routes
+          </h2>
+          <p className="mt-1 text-xs text-zinc-500">
+            {routes.length} route{routes.length === 1 ? "" : "s"} with{" "}
+            {totalStops} total stop
+            {totalStops === 1 ? "" : "s"}
+          </p>
+        </div>
         <button
           type="button"
-          role="switch"
-          aria-checked={isEditMode}
           onClick={() => onEditModeChange(!isEditMode)}
-          className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 ${isEditMode ? "border-amber-500 bg-amber-500" : "border-zinc-200 bg-zinc-100"}`}
+          className="h-9 shrink-0 rounded-[80px] border border-zinc-900 bg-white px-4 text-sm font-semibold text-zinc-900 hover:bg-zinc-50"
         >
-          <span
-            className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${isEditMode ? "translate-x-5" : "translate-x-0.5"}`}
-          />
+          {isEditMode ? "Done" : "Edit"}
         </button>
       </div>
-      <h2 className="shrink-0 text-lg font-semibold text-zinc-800">
-        Optimized Routes
-      </h2>
-      <p className="mt-1 shrink-0 text-xs text-zinc-500">
-        {routes.length} route{routes.length === 1 ? "" : "s"} with {totalStops}{" "}
-        total stop
-        {totalStops === 1 ? "" : "s"}
-      </p>
-      <div className="flex-1 min-h-0 overflow-y-auto mt-3">
-        {routes.length === 0 ? (
-          <p className="text-sm text-zinc-500">No routes yet</p>
-        ) : (
-          <ul className="space-y-3 pb-2">
-            {routes.map((route, idx) => {
-              const isExpanded = expandedRouteIds.has(route.vehicleId);
-              const sortedStops = [...route.stops].sort(
-                (a, b) => a.sequence - b.sequence,
-              );
-              const accent = routeColorHex(idx);
+      <div className="mt-3 flex-1 min-h-0 flex flex-col">
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {routes.length === 0 ? (
+            <p className="text-sm text-zinc-500">No routes yet</p>
+          ) : (
+            <ul className="space-y-3 pb-2">
+              {routes.map((route, idx) => {
+                const isExpanded = expandedRouteIds.has(route.vehicleId);
+                const sortedStops = [...route.stops].sort(
+                  (a, b) => a.sequence - b.sequence,
+                );
+                const accent = routeColorHex(idx);
 
-              return (
-                <li
-                  key={route.vehicleId}
-                  className="rounded-xl border border-zinc-200 bg-zinc-50 shadow-sm overflow-hidden"
-                  style={{ boxShadow: `inset 4px 0 0 ${accent}` }}
-                >
-                  <button
-                    type="button"
-                    onClick={() => toggleExpanded(route.vehicleId)}
-                    className="w-full p-3 flex items-center justify-between gap-3 text-left hover:bg-zinc-100/80 transition-colors"
-                    aria-expanded={isExpanded}
+                return (
+                  <li
+                    key={route.vehicleId}
+                    className="rounded-xl border border-zinc-200 border-l-4 bg-zinc-50 shadow-sm overflow-hidden"
+                    style={{ borderLeftColor: accent }}
                   >
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-start gap-2 min-w-0">
-                        <span
-                          className="mt-0.5 h-5 w-5 shrink-0 rounded-md"
-                          style={{ backgroundColor: accent }}
-                          aria-hidden
-                        />
-                        <div className="min-w-0">
-                          <div
-                            className="text-sm font-semibold"
-                            style={{ color: accent }}
-                          >
-                            Route {idx + 1}
-                          </div>
-                          <div className="text-xs text-zinc-500">
-                            {route.vehicleType ?? "Vehicle"} {route.vehicleId}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="mt-2 grid grid-cols-3 gap-2">
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            STOPS
-                          </div>
-                          <div className="text-sm font-semibold text-zinc-800">
-                            {sortedStops.length}
+                    <button
+                      type="button"
+                      onClick={() => toggleExpanded(route.vehicleId)}
+                      className="w-full p-3 flex items-center justify-between gap-3 text-left hover:bg-zinc-100/80 transition-colors"
+                      aria-expanded={isExpanded}
+                    >
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start gap-2 min-w-0">
+                          <span
+                            className="mt-0.5 h-8 w-8 shrink-0 rounded-md"
+                            style={{ backgroundColor: accent }}
+                            aria-hidden
+                          />
+                          <div className="min-w-0">
+                            <div
+                              className="text-sm font-semibold"
+                              style={{ color: accent }}
+                            >
+                              Route {idx + 1}
+                            </div>
+                            <div className="text-xs text-zinc-500">
+                              {route.vehicleType ?? "Vehicle"} {route.vehicleId}
+                            </div>
                           </div>
                         </div>
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            DISTANCE
-                          </div>
-                          <div className="text-sm font-semibold text-zinc-800 tabular-nums">
-                            {route.distanceMi != null
-                              ? `${route.distanceMi}mi`
-                              : "—"}
+                        <div className="mt-2 grid grid-cols-3 gap-2">
+                          <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
+                            <div className="text-[9px] uppercase tracking-wide text-zinc-500">
+                              STOPS
+                            </div>
+                            <div className="text-sm font-semibold text-zinc-800">
+                              {sortedStops.length}
+                            </div>
                           </div>
-                        </div>
-                        <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
-                          <div className="text-[9px] uppercase tracking-wide text-zinc-500">
-                            EST. TIME
+                          <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
+                            <div className="text-[9px] uppercase tracking-wide text-zinc-500">
+                              DISTANCE
+                            </div>
+                            <div className="text-sm font-semibold text-zinc-800 tabular-nums">
+                              {route.distanceMi != null
+                                ? `${route.distanceMi}mi`
+                                : "—"}
+                            </div>
                           </div>
-                          <div className="text-sm font-semibold text-zinc-800 tabular-nums">
-                            {formatEstTime(route.estimatedTimeMinutes)}
+                          <div className="rounded-lg bg-white px-2 py-1.5 shadow-sm min-w-0 text-center">
+                            <div className="text-[9px] uppercase tracking-wide text-zinc-500">
+                              EST. TIME
+                            </div>
+                            <div className="text-sm font-semibold text-zinc-800 tabular-nums">
+                              {formatEstTime(route.estimatedTimeMinutes)}
+                            </div>
                           </div>
                         </div>
+                        <p className="mt-2 text-xs text-zinc-600">
+                          <span className="font-medium text-zinc-700">
+                            Driver:
+                          </span>{" "}
+                          {route.driverName}
+                        </p>
                       </div>
-                      <p className="mt-2 text-xs text-zinc-600">
-                        <span className="font-medium text-zinc-700">
-                          Driver:
-                        </span>{" "}
-                        {route.driverName}
-                      </p>
-                    </div>
 
-                    <svg
-                      className={`h-4 w-4 shrink-0 text-zinc-500 transition-transform ${
-                        isExpanded ? "rotate-90" : "rotate-0"
-                      }`}
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      aria-hidden
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 1 1 1.06-1.06l4.24 4.24c.3.3.3.77 0 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0Z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
+                      <svg
+                        className={`h-4 w-4 shrink-0 text-zinc-500 transition-transform ${
+                          isExpanded ? "rotate-90" : "rotate-0"
+                        }`}
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 1 1 1.06-1.06l4.24 4.24c.3.3.3.77 0 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </button>
 
-                  {isExpanded && (
-                    <div className="border-t border-zinc-200 bg-zinc-100/50 p-3">
-                      <ul className="space-y-2">
-                        {sortedStops.map((stop) => (
-                          <li key={stop.id}>
-                            <EditableStopItem
-                              stop={stop}
-                              accentColor={accent}
-                              isEditMode={isEditMode}
-                              onSaveNote={(note) =>
-                                onUpdateStopNote(route.vehicleId, stop.id, note)
-                              }
-                            />
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        )}
+                    {isExpanded && (
+                      <div className="border-t border-zinc-200 bg-zinc-100/50 p-3">
+                        <ul className="space-y-2">
+                          {sortedStops.map((stop) => (
+                            <li key={stop.id}>
+                              <EditableStopItem
+                                stop={stop}
+                                accentColor={accent}
+                                isEditMode={isEditMode}
+                                onSaveNote={(note) =>
+                                  onUpdateStopNote(
+                                    route.vehicleId,
+                                    stop.id,
+                                    note,
+                                  )
+                                }
+                              />
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+        <div className="shrink-0 pt-4 text-zinc-700">
+          <p className="text-3xl leading-none font-semibold text-[var(--edit-teal-500)]">
+            b²
+          </p>
+          <p className="mt-1 text-[12px] leading-5 font-medium text-zinc-800">
+            Built with ❤️ for Humanity.
+          </p>
+          <p className="text-[12px] leading-5 font-medium text-zinc-800">
+            The Benevolent Bandwidth Foundation
+          </p>
+        </div>
       </div>
     </aside>
   );
diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index e10535bd..84382d04 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -3,6 +3,10 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import styles from "../edit/edit.module.css";
+import EditSidebar from "../edit/components/Sidebar/Sidebar";
+import SidebarEditButton from "../edit/components/Sidebar/SidebarEditButton";
+import SidebarResultsButton from "../edit/components/Sidebar/SidebarResultsButton";
 import MapComponent from "./components/Map";
 import Sidebar from "./components/Sidebar";
 import type { PendingPinMove, Route } from "./types";
@@ -107,7 +111,9 @@ export default function ResultsPage() {
   const cancelPendingPinMove = useCallback(() => setPendingPinMove(null), []);
 
   return (
-    <main className="h-screen flex flex-col overflow-hidden">
+    <main
+      className={`h-screen flex flex-col overflow-hidden font-sans-manrope ${styles.root}`}
+    >
       {error && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
           <div className="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm w-80 space-y-4">
@@ -184,6 +190,11 @@ export default function ResultsPage() {
         </div>
       </header>
       <div className="flex flex-1 min-h-0">
+        <EditSidebar className="border-r border-zinc-200 shrink-0">
+          <SidebarEditButton />
+          <SidebarResultsButton />
+        </EditSidebar>
+
         <div
           className={`shrink-0 h-full overflow-hidden transition-[width] duration-300 ease-in-out ${isSidebarOpen ? "w-72" : "w-0"}`}
         >
diff --git a/app/ui/src/app/results/types.ts b/app/ui/src/app/results/types.ts
index aee38956..4af3e4dd 100644
--- a/app/ui/src/app/results/types.ts
+++ b/app/ui/src/app/results/types.ts
@@ -22,7 +22,6 @@ export interface Stop {
   timeWindow: TimeWindow; // time type and time for the stop
   note: string; // driver notes for the stop
   addresseeName?: string; // name of person at address
-  phoneNumber?: string; // phone number of person at address
 }
 
 // Data that a single route contains (one driver, their stops in order, and the path to draw for the route)

From 40a56257f65edc12ee30ef0fe5b5d8c6afc33e6d Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 14:42:20 -0700
Subject: [PATCH 4/9] Format sidebar components after review fixes

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx     | 4 +++-
 .../edit/components/layout/sidebar/SidebarResultsButton.tsx   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx b/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
index a48a5187..1181eba7 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/Sidebar.tsx
@@ -7,7 +7,9 @@ type SidebarProps = {
 
 export default function Sidebar({ children, className }: SidebarProps) {
   return (
-    <aside className={className ? `${SIDEBAR_ROOT} ${className}` : SIDEBAR_ROOT}>
+    <aside
+      className={className ? `${SIDEBAR_ROOT} ${className}` : SIDEBAR_ROOT}
+    >
       <div className={SIDEBAR_NAV}>{children}</div>
     </aside>
   );
diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index 3ad12982..6d03da2b 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -55,7 +55,9 @@ export default function SidebarResultsButton() {
   if (hasStoredRoutes) {
     return (
       <Link href="/results" className={SIDEBAR_NAV_ITEM}>
-        <span className={SIDEBAR_NAV_PILL_INACTIVE}>{SIDEBAR_RESULTS_ICON}</span>
+        <span className={SIDEBAR_NAV_PILL_INACTIVE}>
+          {SIDEBAR_RESULTS_ICON}
+        </span>
         <span className={SIDEBAR_NAV_LABEL_INACTIVE}>Results</span>
       </Link>
     );

From d2260992ded242c7d2cff25dd7abc1a51fa69b16 Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 15:05:55 -0700
Subject: [PATCH 5/9] Fix lint: read optimizeResults guard during render

Avoid setState in useEffect (react-hooks/set-state-in-effect) by
reading sessionStorage when rendering SidebarResultsButton.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/layout/sidebar/SidebarResultsButton.tsx     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index 6d03da2b..77bd67e3 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
 import { readHasOptimizeResults } from "../../utils/hasOptimizeResults";
 import {
   SIDEBAR_NAV_ITEM,
@@ -33,11 +32,7 @@ const SIDEBAR_RESULTS_ICON = (
 export default function SidebarResultsButton() {
   const pathname = usePathname();
   const isResultsPage = pathname === "/results";
-  const [hasStoredRoutes, setHasStoredRoutes] = useState(false);
-
-  useEffect(() => {
-    setHasStoredRoutes(readHasOptimizeResults());
-  }, []);
+  const hasStoredRoutes = readHasOptimizeResults();
 
   if (isResultsPage) {
     return (

From d685f0799641b6387028649a11d92355f6cdba7f Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 15:08:38 -0700
Subject: [PATCH 6/9] Fix typecheck: sidebar nav token and Stop.phoneNumber

Use SIDEBAR_NAV_ITEM_INACTIVE (exported from formStyles.v2) and restore
optional phoneNumber on Stop for vroomToRoutes.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../edit/components/layout/sidebar/SidebarResultsButton.tsx   | 4 ++--
 app/ui/src/app/results/types.ts                               | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index 77bd67e3..4fb6ebad 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -4,9 +4,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { readHasOptimizeResults } from "../../utils/hasOptimizeResults";
 import {
-  SIDEBAR_NAV_ITEM,
   SIDEBAR_NAV_ITEM_ACTIVE,
   SIDEBAR_NAV_ITEM_DISABLED,
+  SIDEBAR_NAV_ITEM_INACTIVE,
   SIDEBAR_NAV_LABEL_ACTIVE,
   SIDEBAR_NAV_LABEL_INACTIVE,
   SIDEBAR_NAV_PILL_ACTIVE,
@@ -49,7 +49,7 @@ export default function SidebarResultsButton() {
 
   if (hasStoredRoutes) {
     return (
-      <Link href="/results" className={SIDEBAR_NAV_ITEM}>
+      <Link href="/results" className={SIDEBAR_NAV_ITEM_INACTIVE}>
         <span className={SIDEBAR_NAV_PILL_INACTIVE}>
           {SIDEBAR_RESULTS_ICON}
         </span>
diff --git a/app/ui/src/app/results/types.ts b/app/ui/src/app/results/types.ts
index 4af3e4dd..aee38956 100644
--- a/app/ui/src/app/results/types.ts
+++ b/app/ui/src/app/results/types.ts
@@ -22,6 +22,7 @@ export interface Stop {
   timeWindow: TimeWindow; // time type and time for the stop
   note: string; // driver notes for the stop
   addresseeName?: string; // name of person at address
+  phoneNumber?: string; // phone number of person at address
 }
 
 // Data that a single route contains (one driver, their stops in order, and the path to draw for the route)

From e45fb22577a9545ff616c35c2e9ec8a290885d1d Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 17 May 2026 15:28:13 -0700
Subject: [PATCH 7/9] Unify route pin markers on SVG teardrop with correct
 anchor.

Advanced and fallback markers share the same SVG icon, tip-aligned
coordinates, and a module-level scaledSize singleton.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/ui/src/app/results/components/Map.tsx | 58 ++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/app/ui/src/app/results/components/Map.tsx b/app/ui/src/app/results/components/Map.tsx
index 6d03ad37..810808b7 100644
--- a/app/ui/src/app/results/components/Map.tsx
+++ b/app/ui/src/app/results/components/Map.tsx
@@ -20,6 +20,43 @@ import type { PendingPinMove, Route } from "../types";
 import { routeColorHex } from "../utils/routeColors";
 
 const DAVIS_CENTER = { lat: 38.5449, lng: -121.7405 };
+const MARKER_ICON_WIDTH = 28;
+const MARKER_ICON_HEIGHT = 40;
+
+let markerScaledSize: google.maps.Size | undefined;
+
+function getMarkerScaledSize(): google.maps.Size | undefined {
+  if (typeof google === "undefined") return undefined;
+  markerScaledSize ??= new google.maps.Size(
+    MARKER_ICON_WIDTH,
+    MARKER_ICON_HEIGHT,
+  );
+  return markerScaledSize;
+}
+
+// fillColor is always a route palette hex from routeColorHex, never user input.
+function markerSvgDataUrl(fillColor: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" viewBox="0 0 28 40"><path d="M14 1C7.373 1 2 6.373 2 13c0 9.246 12 24 12 24s12-14.754 12-24C26 6.373 20.627 1 14 1z" fill="${fillColor}" stroke="#ffffff" stroke-width="2"/><circle cx="14" cy="13" r="4.25" fill="#ffffff"/></svg>`;
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+}
+
+function createRoutePinElement(fillColor: string): HTMLElement {
+  const wrapper = document.createElement("div");
+  wrapper.style.width = `${MARKER_ICON_WIDTH}px`;
+  wrapper.style.height = `${MARKER_ICON_HEIGHT}px`;
+  // Advanced marker anchor is the content center; shift so the SVG tip sits on the stop.
+  wrapper.style.transform = "translate(-50%, -50%)";
+
+  const img = document.createElement("img");
+  img.src = markerSvgDataUrl(fillColor);
+  img.width = MARKER_ICON_WIDTH;
+  img.height = MARKER_ICON_HEIGHT;
+  img.style.display = "block";
+  img.draggable = false;
+  img.alt = "";
+  wrapper.appendChild(img);
+  return wrapper;
+}
 
 function routePolylineOptions(
   strokeColor: string,
@@ -307,7 +344,8 @@ function AdvancedMarkers({
 
         if (cancelled) return;
 
-        routes.forEach((route) => {
+        routes.forEach((route, routeIndex) => {
+          const accentColor = routeColorHex(routeIndex);
           const sorted = [...route.stops].sort(
             (a, b) => a.sequence - b.sequence,
           );
@@ -319,6 +357,7 @@ function AdvancedMarkers({
               position,
               title: stop.address,
               gmpDraggable: isEditMode,
+              content: createRoutePinElement(accentColor),
             });
 
             m.addListener("dragend", () => {
@@ -466,7 +505,10 @@ export default function MapComponent({
             />
           )}
           {!mapId &&
-            routes.map((route) => {
+            routes.map((route, routeIndex) => {
+              const accentColor = routeColorHex(routeIndex);
+              const iconUrl = markerSvgDataUrl(accentColor);
+              const scaledSize = getMarkerScaledSize();
               const sorted = [...route.stops].sort(
                 (a, b) => a.sequence - b.sequence,
               );
@@ -485,6 +527,18 @@ export default function MapComponent({
                         key={stop.id}
                         position={position}
                         title={stop.address}
+                        icon={
+                          scaledSize
+                            ? {
+                                url: iconUrl,
+                                scaledSize,
+                                anchor: new google.maps.Point(
+                                  MARKER_ICON_WIDTH / 2,
+                                  MARKER_ICON_HEIGHT,
+                                ),
+                              }
+                            : { url: iconUrl }
+                        }
                         draggable={isEditMode}
                         onDragEnd={(e) => {
                           const latLng = e.latLng;

From 646f0a92f87571ec286f6aef6163a0ef075b828a Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Sun, 24 May 2026 18:25:23 -0700
Subject: [PATCH 8/9] fix(results): correct sidebar import paths after rebase

Point results page and SidebarResultsButton at layout/sidebar and
edit/utils after folder restructure on upstream/main.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../edit/components/layout/sidebar/SidebarResultsButton.tsx | 2 +-
 app/ui/src/app/results/page.tsx                             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index 4fb6ebad..44c55f28 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { readHasOptimizeResults } from "../../utils/hasOptimizeResults";
+import { readHasOptimizeResults } from "../../../utils/hasOptimizeResults";
 import {
   SIDEBAR_NAV_ITEM_ACTIVE,
   SIDEBAR_NAV_ITEM_DISABLED,
diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index 84382d04..735d7690 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -4,9 +4,9 @@
 
 import { useCallback, useEffect, useState } from "react";
 import styles from "../edit/edit.module.css";
-import EditSidebar from "../edit/components/Sidebar/Sidebar";
-import SidebarEditButton from "../edit/components/Sidebar/SidebarEditButton";
-import SidebarResultsButton from "../edit/components/Sidebar/SidebarResultsButton";
+import EditSidebar from "../edit/components/layout/sidebar/Sidebar";
+import SidebarEditButton from "../edit/components/layout/sidebar/SidebarEditButton";
+import SidebarResultsButton from "../edit/components/layout/sidebar/SidebarResultsButton";
 import MapComponent from "./components/Map";
 import Sidebar from "./components/Sidebar";
 import type { PendingPinMove, Route } from "./types";

From 202f68e36dac53819e460625b0848118e71917ce Mon Sep 17 00:00:00 2001
From: Kesar Sidhu <kesarsidhu@Kesars-MacBook-Pro.local>
Date: Mon, 25 May 2026 11:20:19 -0700
Subject: [PATCH 9/9] Address review fixes on pin colors.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/ui/src/app/constants/b2Branding.ts        |  5 ++
 .../layout/sidebar/SidebarResultsButton.tsx   |  4 +-
 app/ui/src/app/edit/edit.module.css           | 90 +------------------
 app/ui/src/app/edit/hooks/useOptimize.ts      |  3 +-
 .../src/app/edit/utils/hasOptimizeResults.ts  | 66 ++++++++++++--
 app/ui/src/app/results/components/Map.tsx     | 12 +--
 app/ui/src/app/results/components/Sidebar.tsx | 11 ++-
 app/ui/src/app/results/page.tsx               | 37 ++++----
 .../app/shared/editDesignTokens.module.css    | 73 +++++++++++++++
 9 files changed, 176 insertions(+), 125 deletions(-)
 create mode 100644 app/ui/src/app/constants/b2Branding.ts
 create mode 100644 app/ui/src/app/shared/editDesignTokens.module.css

diff --git a/app/ui/src/app/constants/b2Branding.ts b/app/ui/src/app/constants/b2Branding.ts
new file mode 100644
index 00000000..6195cd90
--- /dev/null
+++ b/app/ui/src/app/constants/b2Branding.ts
@@ -0,0 +1,5 @@
+export const B2_LOGO_MARK = "b²";
+
+export const B2_FOOTER_TAGLINE = "Built with ❤️ for Humanity.";
+
+export const B2_FOUNDATION_NAME = "The Benevolent Bandwidth Foundation";
diff --git a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
index 44c55f28..79c8fd49 100644
--- a/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
+++ b/app/ui/src/app/edit/components/layout/sidebar/SidebarResultsButton.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { readHasOptimizeResults } from "../../../utils/hasOptimizeResults";
+import { useHasOptimizeResults } from "../../../utils/hasOptimizeResults";
 import {
   SIDEBAR_NAV_ITEM_ACTIVE,
   SIDEBAR_NAV_ITEM_DISABLED,
@@ -32,7 +32,7 @@ const SIDEBAR_RESULTS_ICON = (
 export default function SidebarResultsButton() {
   const pathname = usePathname();
   const isResultsPage = pathname === "/results";
-  const hasStoredRoutes = readHasOptimizeResults();
+  const hasStoredRoutes = useHasOptimizeResults();
 
   if (isResultsPage) {
     return (
diff --git a/app/ui/src/app/edit/edit.module.css b/app/ui/src/app/edit/edit.module.css
index 01f07bed..f4d49c28 100644
--- a/app/ui/src/app/edit/edit.module.css
+++ b/app/ui/src/app/edit/edit.module.css
@@ -1,93 +1,9 @@
-/**
- * Scoped design tokens for the edit page.
- * Import this only in app/edit/page.tsx — does not affect other pages.
- *
- * Usage in page.tsx:
- *   import styles from './edit.module.css';
- *   <div className={styles.root}>...</div>
- *
- * All CSS variables defined on .root are available to every descendant,
- * and can be referenced in formStyles.v2.ts as Tailwind arbitrary values:
- *   bg-[var(--edit-page-bg)]
- *   text-[var(--edit-foreground)]
- *   etc.
- */
-
+/* tokens in shared/editDesignTokens.module.css */
 .root {
-  /* ── Teal brand ──────────────────────────────────────────────── */
-  --edit-teal-300: #57ac91;
-  --edit-teal-500: #397461;
-  --edit-teal-600: #267b67;
-  --edit-teal-700: #265749;
-  --edit-teal-alpha: #39746126;
-  --edit-pagination-active-bg: rgba(26, 173, 144, 0.24);
-  --edit-pagination-mobile-active-bg: #c3e1d8;
-
-  /* ── Stone neutrals (Figma Stone scale) ─────────────────────── */
-  --edit-bg-primary: #fdfdfc;
-  --edit-stone-50: #f8f7f5;
-  --edit-stone-200: #dcdbd8;
-  --edit-stone-500: #908f8c;
-  --edit-stone-600: #777673;
-  --edit-stone-700: #5d5c59;
-
-  /* ── Nav ─────────────────────────────────────────────────────── */
-  --edit-container-active: #d5f2e8;
-  --edit-text-primary: #272725;
-  --edit-text-secondary: #464544;
-
-  /* ── Buttons ──────────────────────────────────────────────────── */
-  --edit-btn-primary: #4cb599;
-
-  --edit-secondary-btn-hover: rgba(0, 0, 0, 0.02);
-  --edit-secondary-btn-pressed: rgba(0, 0, 0, 0.04);
-
-  --edit-tertiary-btn-hover: #f6f5f2;
-  --edit-tertiary-btn-pressed: #f6f5f2;
-
-  /* ── Semantic status ─────────────────────────────────────────── */
-  --edit-container-success: #daf1db;
-  --edit-text-success: #2a7e3b;
-  --edit-required-asterisk: #da1b0b;
-  --edit-error-border: #da1b0b;
-  --edit-error-bg: #fef2f2;
-  --edit-footer-logo-bg: url("/b2logo.png") -25.852px -10.077px / 293.436%
-    265.161% no-repeat;
-
-  /* ── Delete button ──────────────────────────────────────────── */
-  --edit-btn-delete: #da1b0b;
-  --edit-text-invert: #fdfdfc;
-
-  /* ── Icons ──────────────────────────────────────────────────── */
-  --edit-icon-vehicle: #1c1b1f;
-  --edit-icon-location: #1c1b1f;
-  --edit-primary-icon: #3d3d3c;
-
-  /* ── Empty state illustrations ──────────────────────────────── */
-  --edit-empty-state-shadow: #e8e8e8;
-
-  /* Vehicle illustration */
-  --edit-vehicle-body: #4f46e5;
-  --edit-vehicle-window: #a5b4fc;
-  --edit-vehicle-accent: #3730a3;
-  --edit-vehicle-detail: #c7d2fe;
-  --edit-vehicle-wheel-outer: #1e1e2e;
-  --edit-vehicle-wheel-mid: #6b7280;
-  --edit-vehicle-wheel-inner: #d1d5db;
-  --edit-vehicle-light: #fcd34d;
-  --edit-vehicle-back-panel: #312e81;
-
-  /* Address illustration */
-  --edit-address-accent: #f97316;
-  --edit-address-on-accent: #ffffff;
-  --edit-address-card-bg: #fff7ed;
-  --edit-address-card-border: #fed7aa;
-  --edit-address-card-header: #ffedd5;
-  --edit-address-card-line-dark: #e5e7eb;
-  --edit-address-card-line-light: #f3f4f6;
+  composes: root from "../shared/editDesignTokens.module.css";
 }
 
-/* ── Primary Button Hover and Pressed States Overlay ──────────────────────── */
+/* primary button hover overlay */
 .primaryBtnOverlay {
   position: relative;
   overflow: hidden;
diff --git a/app/ui/src/app/edit/hooks/useOptimize.ts b/app/ui/src/app/edit/hooks/useOptimize.ts
index 9c3998ca..8f81a0fa 100644
--- a/app/ui/src/app/edit/hooks/useOptimize.ts
+++ b/app/ui/src/app/edit/hooks/useOptimize.ts
@@ -13,6 +13,7 @@ import {
   vehicleRowToVehicleInput,
 } from "@/app/edit/utils/optimizeMapper";
 import { SUPPORTED_STATES } from "@/app/edit/constants/supportedRegions";
+import { setOptimizeResults } from "@/app/edit/utils/hasOptimizeResults";
 import { vroomToRoutes } from "@/app/edit/utils/vroomToRoutes";
 import type {
   AddressCard,
@@ -362,7 +363,7 @@ export function useOptimize(
               lockedVehicles,
               addresses,
             );
-            sessionStorage.setItem("optimizeResults", JSON.stringify(routes));
+            setOptimizeResults(routes);
             router.push("/results");
             return;
           }
diff --git a/app/ui/src/app/edit/utils/hasOptimizeResults.ts b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
index 583f388c..97603782 100644
--- a/app/ui/src/app/edit/utils/hasOptimizeResults.ts
+++ b/app/ui/src/app/edit/utils/hasOptimizeResults.ts
@@ -1,16 +1,68 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import type { Route } from "@/app/results/types";
 
+export const OPTIMIZE_RESULTS_STORAGE_KEY = "optimizeResults";
+
+export const OPTIMIZE_RESULTS_UPDATED_EVENT = "optimize-results-updated";
+
+function isValidRoute(value: unknown): value is Route {
+  if (!value || typeof value !== "object") return false;
+  const route = value as Record<string, unknown>;
+  return typeof route.vehicleId === "string" && Array.isArray(route.stops);
+}
+
+export function parseStoredRoutes(stored: string): Route[] | null {
+  try {
+    const parsed: unknown = JSON.parse(stored);
+    if (!Array.isArray(parsed) || parsed.length === 0) return null;
+    if (!parsed.every(isValidRoute)) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
 /** True when sessionStorage has at least one route ready for /results. */
 export function readHasOptimizeResults(): boolean {
   if (typeof window === "undefined") return false;
 
-  const stored = sessionStorage.getItem("optimizeResults");
+  const stored = sessionStorage.getItem(OPTIMIZE_RESULTS_STORAGE_KEY);
   if (!stored) return false;
 
-  try {
-    const parsed = JSON.parse(stored) as Route[];
-    return Array.isArray(parsed) && parsed.length > 0;
-  } catch {
-    return false;
-  }
+  return parseStoredRoutes(stored) != null;
+}
+
+export function notifyOptimizeResultsUpdated(): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new Event(OPTIMIZE_RESULTS_UPDATED_EVENT));
+}
+
+export function setOptimizeResults(routes: Route[]): void {
+  sessionStorage.setItem(OPTIMIZE_RESULTS_STORAGE_KEY, JSON.stringify(routes));
+  notifyOptimizeResultsUpdated();
+}
+
+export function clearOptimizeResults(): void {
+  sessionStorage.removeItem(OPTIMIZE_RESULTS_STORAGE_KEY);
+  notifyOptimizeResultsUpdated();
+}
+
+export function useHasOptimizeResults(): boolean {
+  const [hasResults, setHasResults] = useState(false);
+
+  useEffect(() => {
+    const sync = () => setHasResults(readHasOptimizeResults());
+    sync();
+
+    window.addEventListener(OPTIMIZE_RESULTS_UPDATED_EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(OPTIMIZE_RESULTS_UPDATED_EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+
+  return hasResults;
 }
diff --git a/app/ui/src/app/results/components/Map.tsx b/app/ui/src/app/results/components/Map.tsx
index 810808b7..0bb99cea 100644
--- a/app/ui/src/app/results/components/Map.tsx
+++ b/app/ui/src/app/results/components/Map.tsx
@@ -23,15 +23,9 @@ const DAVIS_CENTER = { lat: 38.5449, lng: -121.7405 };
 const MARKER_ICON_WIDTH = 28;
 const MARKER_ICON_HEIGHT = 40;
 
-let markerScaledSize: google.maps.Size | undefined;
-
 function getMarkerScaledSize(): google.maps.Size | undefined {
   if (typeof google === "undefined") return undefined;
-  markerScaledSize ??= new google.maps.Size(
-    MARKER_ICON_WIDTH,
-    MARKER_ICON_HEIGHT,
-  );
-  return markerScaledSize;
+  return new google.maps.Size(MARKER_ICON_WIDTH, MARKER_ICON_HEIGHT);
 }
 
 // fillColor is always a route palette hex from routeColorHex, never user input.
@@ -44,8 +38,8 @@ function createRoutePinElement(fillColor: string): HTMLElement {
   const wrapper = document.createElement("div");
   wrapper.style.width = `${MARKER_ICON_WIDTH}px`;
   wrapper.style.height = `${MARKER_ICON_HEIGHT}px`;
-  // Advanced marker anchor is the content center; shift so the SVG tip sits on the stop.
-  wrapper.style.transform = "translate(-50%, -50%)";
+  // Anchor bottom-center of the pin on the stop (tip is at y=40 in the SVG).
+  wrapper.style.transform = "translate(-50%, -100%)";
 
   const img = document.createElement("img");
   img.src = markerSvgDataUrl(fillColor);
diff --git a/app/ui/src/app/results/components/Sidebar.tsx b/app/ui/src/app/results/components/Sidebar.tsx
index bb66eb2b..46fd3d05 100644
--- a/app/ui/src/app/results/components/Sidebar.tsx
+++ b/app/ui/src/app/results/components/Sidebar.tsx
@@ -1,6 +1,11 @@
 // Sidebar: route cards, expand/collapse stops, edit-mode toggle.
 
 import { useMemo, useState } from "react";
+import {
+  B2_FOOTER_TAGLINE,
+  B2_FOUNDATION_NAME,
+  B2_LOGO_MARK,
+} from "@/app/constants/b2Branding";
 import type { Route } from "../types";
 import { routeColorHex } from "../utils/routeColors";
 import EditableStopItem from "./EditableStopItem";
@@ -193,13 +198,13 @@ export default function Sidebar({
         </div>
         <div className="shrink-0 pt-4 text-zinc-700">
           <p className="text-3xl leading-none font-semibold text-[var(--edit-teal-500)]">
-            b²
+            {B2_LOGO_MARK}
           </p>
           <p className="mt-1 text-[12px] leading-5 font-medium text-zinc-800">
-            Built with ❤️ for Humanity.
+            {B2_FOOTER_TAGLINE}
           </p>
           <p className="text-[12px] leading-5 font-medium text-zinc-800">
-            The Benevolent Bandwidth Foundation
+            {B2_FOUNDATION_NAME}
           </p>
         </div>
       </div>
diff --git a/app/ui/src/app/results/page.tsx b/app/ui/src/app/results/page.tsx
index 735d7690..4a0e183c 100644
--- a/app/ui/src/app/results/page.tsx
+++ b/app/ui/src/app/results/page.tsx
@@ -3,7 +3,12 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import styles from "../edit/edit.module.css";
+import designTokens from "../shared/editDesignTokens.module.css";
+import {
+  clearOptimizeResults,
+  OPTIMIZE_RESULTS_STORAGE_KEY,
+  parseStoredRoutes,
+} from "../edit/utils/hasOptimizeResults";
 import EditSidebar from "../edit/components/layout/sidebar/Sidebar";
 import SidebarEditButton from "../edit/components/layout/sidebar/SidebarEditButton";
 import SidebarResultsButton from "../edit/components/layout/sidebar/SidebarResultsButton";
@@ -14,18 +19,16 @@ import type { PendingPinMove, Route } from "./types";
 function readInitialRoutes(): { routes: Route[]; error: string | null } {
   if (typeof window === "undefined") return { routes: [], error: null };
 
-  const stored = sessionStorage.getItem("optimizeResults");
+  const stored = sessionStorage.getItem(OPTIMIZE_RESULTS_STORAGE_KEY);
   if (!stored) return { routes: [], error: null };
 
-  try {
-    const parsed = JSON.parse(stored) as Route[];
-    return { routes: parsed, error: null };
-  } catch {
-    return {
-      routes: [],
-      error: "Route data could not be loaded. Please go back and try again.",
-    };
-  }
+  const parsed = parseStoredRoutes(stored);
+  if (parsed) return { routes: parsed, error: null };
+
+  return {
+    routes: [],
+    error: "Route data could not be loaded. Please go back and try again.",
+  };
 }
 
 export default function ResultsPage() {
@@ -36,7 +39,7 @@ export default function ResultsPage() {
 
   useEffect(() => {
     if (initialRoutes.length > 0) {
-      sessionStorage.removeItem("optimizeResults"); // consume once after successful parse + state update
+      clearOptimizeResults(); // consume once after successful parse + state update
     }
   }, [initialRoutes.length]);
 
@@ -112,7 +115,7 @@ export default function ResultsPage() {
 
   return (
     <main
-      className={`h-screen flex flex-col overflow-hidden font-sans-manrope ${styles.root}`}
+      className={`h-screen flex flex-col overflow-hidden font-sans-manrope ${designTokens.root}`}
     >
       {error && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
@@ -152,10 +155,12 @@ export default function ResultsPage() {
             </svg>
           </button>
           <div className="min-w-0">
-            <span className="block truncate text-sm font-semibold tracking-wide text-zinc-800 uppercase">
+            <span className="block truncate text-xs font-semibold tracking-wide text-zinc-500 uppercase">
               Delivery Optimizer
             </span>
-            <h1 className="sr-only">Results</h1>
+            <h1 className="truncate text-sm font-semibold text-zinc-800">
+              Results
+            </h1>
           </div>
         </div>
 
@@ -172,7 +177,7 @@ export default function ResultsPage() {
               <button
                 type="button"
                 onClick={savePendingPinMove}
-                className="rounded-full border border-zinc-300 bg-white px-3 py-1 text-xs font-medium text-zinc-700 hover:bg-zinc-50"
+                className="rounded-full bg-amber-500 px-3 py-1 text-xs font-medium text-white hover:bg-amber-600"
               >
                 Save
               </button>
diff --git a/app/ui/src/app/shared/editDesignTokens.module.css b/app/ui/src/app/shared/editDesignTokens.module.css
new file mode 100644
index 00000000..622c1943
--- /dev/null
+++ b/app/ui/src/app/shared/editDesignTokens.module.css
@@ -0,0 +1,73 @@
+/* put .root on edit/results page shell */
+.root {
+  /* teal */
+  --edit-teal-300: #57ac91;
+  --edit-teal-500: #397461;
+  --edit-teal-600: #267b67;
+  --edit-teal-700: #265749;
+  --edit-teal-alpha: #39746126;
+  --edit-pagination-active-bg: rgba(26, 173, 144, 0.24);
+  --edit-pagination-mobile-active-bg: #c3e1d8;
+
+  /* stone */
+  --edit-bg-primary: #fdfdfc;
+  --edit-stone-50: #f8f7f5;
+  --edit-stone-200: #dcdbd8;
+  --edit-stone-500: #908f8c;
+  --edit-stone-600: #777673;
+  --edit-stone-700: #5d5c59;
+
+  /* nav */
+  --edit-container-active: #d5f2e8;
+  --edit-foreground: #272725;
+  --edit-text-primary: #272725;
+  --edit-text-secondary: #464544;
+
+  /* buttons */
+  --edit-btn-primary: #4cb599;
+  --edit-secondary-btn-hover: rgba(0, 0, 0, 0.02);
+  --edit-secondary-btn-pressed: rgba(0, 0, 0, 0.04);
+  --edit-tertiary-btn-hover: #f6f5f2;
+  --edit-tertiary-btn-pressed: #f6f5f2;
+
+  /* status */
+  --edit-container-success: #daf1db;
+  --edit-text-success: #2a7e3b;
+  --edit-required-asterisk: #da1b0b;
+  --edit-error-border: #da1b0b;
+  --edit-error-bg: #fef2f2;
+  --edit-footer-logo-bg: url("/b2logo.png") -25.852px -10.077px / 293.436%
+    265.161% no-repeat;
+
+  /* delete */
+  --edit-btn-delete: #da1b0b;
+  --edit-text-invert: #fdfdfc;
+
+  /* icons */
+  --edit-icon-vehicle: #1c1b1f;
+  --edit-icon-location: #1c1b1f;
+  --edit-primary-icon: #3d3d3c;
+
+  /* empty state */
+  --edit-empty-state-shadow: #e8e8e8;
+
+  /* vehicle empty illustration */
+  --edit-vehicle-body: #4f46e5;
+  --edit-vehicle-window: #a5b4fc;
+  --edit-vehicle-accent: #3730a3;
+  --edit-vehicle-detail: #c7d2fe;
+  --edit-vehicle-wheel-outer: #1e1e2e;
+  --edit-vehicle-wheel-mid: #6b7280;
+  --edit-vehicle-wheel-inner: #d1d5db;
+  --edit-vehicle-light: #fcd34d;
+  --edit-vehicle-back-panel: #312e81;
+
+  /* address empty illustration */
+  --edit-address-accent: #f97316;
+  --edit-address-on-accent: #ffffff;
+  --edit-address-card-bg: #fff7ed;
+  --edit-address-card-border: #fed7aa;
+  --edit-address-card-header: #ffedd5;
+  --edit-address-card-line-dark: #e5e7eb;
+  --edit-address-card-line-light: #f3f4f6;
+}