From ee7e0d6ace983a352c3742523e067b66e03e2c4c Mon Sep 17 00:00:00 2001
From: Sebastian Legarraga <64795732+slegarraga@users.noreply.github.com>
Date: Thu, 6 Aug 2026 09:59:41 -0400
Subject: [PATCH 1/2] feat: show active route badge in Postman request builder

---
 .../src/components/views/PostmanView.tsx      | 14 +++++++++
 packages/desktop/src/index.css                | 31 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/packages/desktop/src/components/views/PostmanView.tsx b/packages/desktop/src/components/views/PostmanView.tsx
index df7d90b..36f130d 100644
--- a/packages/desktop/src/components/views/PostmanView.tsx
+++ b/packages/desktop/src/components/views/PostmanView.tsx
@@ -35,6 +35,12 @@ export function PostmanView({
   onDeleteRequest?: (id: string) => void;
   onUpdateSavedRequests?: (next: SavedRequest[]) => void;
 }) {
+  const routeTarget = activeTunnel
+    ? activeTunnel.publicUrl.includes('trycloudflare.com')
+      ? 'Cloudflare Edge'
+      : 'Public Tunnel'
+    : 'Local Loopback';
+
   // Request Sub-Tabs: 'body' | 'headers' | 'auth' | 'response'
   const [requestTab, setRequestTab] = useState<'body' | 'headers' | 'auth' | 'response'>('body');
   const [responseSubTab, setResponseSubTab] = useState<'body' | 'headers'>('body');
@@ -655,6 +661,14 @@ export function PostmanView({
             aria-label="Request URL or path"
           />
 
+          <span
+            className={`route-badge ${activeTunnel?.publicUrl.includes('trycloudflare.com') ? 'route-tunnel' : 'route-local'}`}
+            title={activeTunnel?.publicUrl ?? 'http://localhost:3000'}
+          >
+            <span className="route-dot" aria-hidden="true" />
+            {routeTarget}
+          </span>
+
           <button
             className="btn-primary shrink-0 font-bold px-4 py-2 rounded-lg text-xs flex items-center justify-center gap-1.5 shadow-md hover:scale-[1.01] transition-transform"
             onClick={handleSendRequest}
diff --git a/packages/desktop/src/index.css b/packages/desktop/src/index.css
index f7849ed..d6f88d4 100644
--- a/packages/desktop/src/index.css
+++ b/packages/desktop/src/index.css
@@ -531,6 +531,37 @@ button:disabled { cursor: not-allowed; opacity: 0.5; }
 }
 .form-input::placeholder { color: var(--color-outline); }
 
+.route-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-outline-variant);
+  border-radius: 99px;
+  background: var(--color-surface-container-high);
+  color: var(--color-on-surface-variant);
+  font: 700 9px var(--font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.route-tunnel {
+  color: #b7e05a;
+  border-color: rgba(183, 224, 90, 0.45);
+}
+
+.route-local {
+  color: var(--color-on-surface-variant);
+}
+
+.route-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
 .form-textarea {
   width: 100%; min-height: 180px; padding: 14px;
   border: 1px solid var(--color-outline-variant); border-radius: 8px;

From dba0d2b7e3f2d34500d9352560d54af3b7e0659c Mon Sep 17 00:00:00 2001
From: Sebastian Legarraga <64795732+slegarraga@users.noreply.github.com>
Date: Thu, 6 Aug 2026 11:12:01 -0400
Subject: [PATCH 2/2] fix: use M3 design tokens for route badge list

---
 packages/desktop/src/components/views/Dialogs.tsx        | 9 ++++-----
 .../desktop/src/components/views/SharedComponents.tsx    | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/src/components/views/Dialogs.tsx b/packages/desktop/src/components/views/Dialogs.tsx
index 3eb5180..003674d 100644
--- a/packages/desktop/src/components/views/Dialogs.tsx
+++ b/packages/desktop/src/components/views/Dialogs.tsx
@@ -249,18 +249,18 @@ export function DomainSelectDialog({
                     justifyContent: 'space-between',
                     padding: '10px 14px',
                     borderRadius: '8px',
-                    background: isSelected ? 'var(--teal-dim)' : 'var(--surface-2)',
-                    border: isSelected ? '1px solid var(--teal)' : '1px solid var(--line)',
+                    background: isSelected ? 'var(--color-primary-container)' : 'var(--color-surface-container-high)',
+                    border: isSelected ? '1px solid var(--color-primary)' : '1px solid var(--color-outline-variant)',
                     cursor: 'pointer',
                     transition: 'all var(--dur-fast) var(--ease)',
-                    boxShadow: isSelected ? '0 0 12px var(--teal-dim)' : 'none',
+                    boxShadow: isSelected ? '0 0 12px var(--color-primary-container)' : 'none',
                   }}
                 >
                   <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1, minWidth: 0 }}>
                     <span style={{ fontSize: '18px', minWidth: '24px', textAlign: 'center' }}>{opt.icon}</span>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', minWidth: 0, textAlign: 'left' }}>
                       <strong style={{ fontSize: '12px', color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{opt.title}</strong>
-                      <span style={{ fontSize: '11px', color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{opt.desc}</span>
+                      <span style={{ fontSize: '11px', color: 'var(--color-on-surface-variant)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{opt.desc}</span>
                     </div>
                   </div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginLeft: '12px' }}>
@@ -447,4 +447,3 @@ export function ConfirmPurgeDialog({
   );
 }
 
-
diff --git a/packages/desktop/src/components/views/SharedComponents.tsx b/packages/desktop/src/components/views/SharedComponents.tsx
index 89c284a..13c4582 100644
--- a/packages/desktop/src/components/views/SharedComponents.tsx
+++ b/packages/desktop/src/components/views/SharedComponents.tsx
@@ -350,7 +350,7 @@ export function parseHeaderText(value: string): Record<string, string> {
 
 export function SignalBars({ latency }: { latency: number }) {
   let activeBars = 0;
-  let barColor = 'var(--muted)';
+  let barColor = 'var(--color-on-surface-variant)';
   
   if (latency < 50) {
     activeBars = 4;