From 1ba867094a55e24ebdaecea37a7c96b806c51692 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 10:23:30 -0400
Subject: [PATCH 1/8] better box shadow for guide toolbar v2 from krisna

---
 .../src/modules/guide/components/Toolbar/V2/V2.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
index 651de471e..3b1ef953a 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -33,6 +33,15 @@ const TOGGLE_COLLAPSED_HOTKEY = ".";
 
 const TOOLBAR_WIDTH = "540px";
 
+const TOOLBAR_BOX_SHADOW = [
+  "0 0 0 1px rgba(0, 0, 0, 0.06)",
+  "0 0 0 1px rgba(255, 255, 255, 0.10)",
+  "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+  "0 1px 1px 0 rgba(0, 0, 0, 0.04)",
+  "0 4px 6px -1px rgba(0, 0, 0, 0.05)",
+  "0 8px 16px -4px rgba(0, 0, 0, 0.06)",
+].join(", ");
+
 const Kbd = ({ children }: { children: React.ReactNode }) => {
   return (
     <kbd
@@ -197,11 +206,10 @@ export const V2 = () => {
           direction="column"
           backgroundColor="surface-1"
           rounded="4"
-          border="px"
           overflow="hidden"
           style={{
             width: TOOLBAR_WIDTH,
-            boxShadow: "0 8px 32px var(--tgph-gray-5)",
+            boxShadow: TOOLBAR_BOX_SHADOW,
             animation: "toolbar-expand-fade-in 150ms ease-out",
           }}
         >

From 34e1fde0e661833faeaf4f1140583213edcfde92 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 14:01:17 -0400
Subject: [PATCH 2/8] tooltip copy and delay updates

---
 .../guide/components/Toolbar/V2/FocusChin.tsx |  7 +-
 .../Toolbar/V2/GuideAnnotatedStatusDot.tsx    |  4 +-
 .../Toolbar/V2/GuideContextDetails.tsx        | 20 ++++--
 .../guide/components/Toolbar/V2/GuideRow.tsx  |  6 +-
 .../components/Toolbar/V2/GuideRowDetails.tsx | 66 +++++++++++--------
 .../guide/components/Toolbar/V2/V2.tsx        | 13 ++--
 .../guide/components/Toolbar/V2/helpers.ts    |  4 ++
 7 files changed, 76 insertions(+), 44 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
index 337239604..a043433a6 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
@@ -7,6 +7,7 @@ import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import * as React from "react";
 
 import { GUIDE_ROW_DATA_SELECTOR } from "./GuideRow";
+import { sharedTooltipProps } from "./helpers";
 import { InspectionResultOk } from "./useInspectGuideClientStore";
 
 // Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,
@@ -88,7 +89,7 @@ export const FocusChin = ({ guides, guideListRef }: Props) => {
           Focus mode: {currentKey}
         </Text>
         <Stack align="center" gap="1" style={{ flexShrink: 0 }}>
-          <Tooltip label="Focus previous guide">
+          <Tooltip label="Focus previous guide" {...sharedTooltipProps}>
             <Button
               size="0"
               variant="ghost"
@@ -117,7 +118,7 @@ export const FocusChin = ({ guides, guideListRef }: Props) => {
               }}
             />
           </Tooltip>
-          <Tooltip label="Focus next guide">
+          <Tooltip label="Focus next guide" {...sharedTooltipProps}>
             <Button
               size="0"
               variant="ghost"
@@ -148,7 +149,7 @@ export const FocusChin = ({ guides, guideListRef }: Props) => {
               }}
             />
           </Tooltip>
-          <Tooltip label="Exit focus lock">
+          <Tooltip label="Exit focus mode" {...sharedTooltipProps}>
             <Button
               size="0"
               variant="ghost"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx
index 2222a5704..4dc1a3cfa 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideAnnotatedStatusDot.tsx
@@ -1,6 +1,8 @@
 import { Stack } from "@telegraph/layout";
 import { Tooltip } from "@telegraph/tooltip";
 
+import { sharedTooltipProps } from "./helpers";
+
 export type StatusColor = "blue" | "red" | "yellow" | "gray";
 
 // Directly copied from the design prototype.
@@ -59,7 +61,7 @@ export const GuideAnnotatedStatusDot = ({
   tooltip: string;
 }) => {
   return (
-    <Tooltip label={tooltip}>
+    <Tooltip label={tooltip} {...sharedTooltipProps}>
       <Stack
         as="span"
         align="center"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
index 142781e3c..8c45f296a 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -4,6 +4,8 @@ import { Toggle } from "@telegraph/toggle";
 import { Tooltip } from "@telegraph/tooltip";
 import { Text } from "@telegraph/typography";
 
+import { sharedTooltipProps } from "./helpers";
+
 export const GuideContextDetails = () => {
   const { client } = useGuideContext();
   const { debugSettings } = useStore(client.store, (state) => ({
@@ -18,7 +20,10 @@ export const GuideContextDetails = () => {
         </Text>
         <Stack direction="column" gap="1">
           <Stack direction="row" gap="2" align="center" h="7">
-            <Tooltip label="Contain engagement actions to client side only">
+            <Tooltip
+              label="When enabled, engagement actions are not sent to Knock."
+              {...sharedTooltipProps}
+            >
               <Box width="36" mt="1">
                 <Text
                   as="span"
@@ -45,7 +50,10 @@ export const GuideContextDetails = () => {
             />
           </Stack>
           <Stack direction="row" gap="2" align="center" h="7">
-            <Tooltip label="Ignore throttle and show next guide immediately">
+            <Tooltip
+              label="Ignore throttle and show next guide immediately"
+              {...sharedTooltipProps}
+            >
               <Box width="36" mt="1">
                 <Text
                   as="span"
@@ -77,13 +85,11 @@ export const GuideContextDetails = () => {
         <Tooltip
           label={
             <Text as="span" size="1">
-              The tenant and data payload passed to the guide client that are
-              used for targeting
-              <br />
-              (via the targetParams prop to KnockGuideProvider)
+              The tenant and data payload passed to KnockGuideProvider.
+              Available for use in runtime conditions.
             </Text>
           }
-          delayDuration={500}
+          {...sharedTooltipProps}
         >
           <Text
             as="span"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
index 58f27a911..20849bc12 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -17,7 +17,7 @@ import {
   StatusSummary,
   getSelectableStatusSummary,
 } from "./GuideRowDetails";
-import { FOCUS_ERRORS } from "./helpers";
+import { FOCUS_ERRORS, sharedTooltipProps } from "./helpers";
 import {
   AnnotatedGuide,
   AnnotatedStatuses,
@@ -259,6 +259,7 @@ export const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {
           </Stack>
           <Tooltip
             label={`${guide.key}${guide.bypass_global_group_limit ? " (unthrottled)" : ""}`}
+            {...sharedTooltipProps}
           >
             <Text
               as="code"
@@ -281,7 +282,7 @@ export const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {
         {/* Right section: verdict + pills + focus */}
         <Stack align="center" gap="1_5" style={{ flexShrink: 0 }}>
           {!hasFocus && (
-            <Tooltip label={summary.description}>
+            <Tooltip label={summary.description} {...sharedTooltipProps}>
               <Tag size="0" variant="soft" color={summary.color}>
                 {summary.label}
               </Tag>
@@ -344,6 +345,7 @@ export const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {
               isUncommittedGuide(guide) ||
               guide.annotation.selectable.status === undefined
             }
+            {...sharedTooltipProps}
           >
             <Button
               size="0"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
index b661e4eda..b0295ef46 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
@@ -6,7 +6,7 @@ import {
   StatusColor,
   GuideAnnotatedStatusDot as StatusDot,
 } from "./GuideAnnotatedStatusDot";
-import { FOCUS_ERRORS } from "./helpers";
+import { sharedTooltipProps } from "./helpers";
 import {
   AnnotatedGuide,
   UncommittedGuide,
@@ -46,25 +46,32 @@ const StatusRow = ({
   value,
   color,
   tooltip,
+  children,
 }: {
   label: string;
   value: string;
   color: StatusColor;
   tooltip?: React.ReactNode;
+  children?: React.ReactNode;
 }) => {
   return (
     <Stack align="center" gap="1">
-      <Tooltip enabled={!!tooltip} label={tooltip} delayDuration={500}>
-        <Stack as="span" align="center" gap="1" display="inline-flex">
+      <Stack as="span" align="center" gap="1" display="inline-flex">
+        <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>
           <StatusDot color={color} tooltip={`${label}: ${value}`} />
           <Text as="span" size="1" weight="medium">
             {label}:
           </Text>
-          <Text as="span" size="1" weight="medium" color={color}>
-            {value}
-          </Text>
-        </Stack>
-      </Tooltip>
+          {/* User children over value when provided, for cases when we want to
+              have its own tooltip over it */}
+          {!children && (
+            <Text as="span" size="1" weight="medium" color={color}>
+              {value}
+            </Text>
+          )}
+        </Tooltip>
+        {children}
+      </Stack>
     </Stack>
   );
 };
@@ -83,26 +90,26 @@ export const getSelectableStatusSummary = (
       return {
         label: "Ready to display",
         color: "blue",
-        description: "This guide is queried and ready to display",
+        description: "The guide is queried and ready to render.",
       };
     case "throttled":
       return {
         label: "Throttled",
         color: "yellow",
-        description:
-          "This guide is queried and ready to display, but throttled currently",
+        description: "The guide is queried but held back by throttle settings.",
       };
     case "queried":
       return {
         label: "Queued",
         color: "gray",
-        description: "This guide is queried but is not ready to display",
+        description:
+          "The guide is queried but waiting behind higher-priority guides.",
       };
     default:
       return {
         label: "Not queried",
         color: "red",
-        description: `This guide is not queried (${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()})`,
+        description: "No useGuide(s) call on this page matches this guide.",
       };
   }
 };
@@ -134,19 +141,19 @@ export const GuideRowDetails = ({
           label="Active"
           value={annotation.active.status ? "Yes" : "No"}
           color={annotation.active.status ? "blue" : "red"}
-          tooltip="Eligible if the guide is currently active"
+          tooltip="Whether the guide is active in this environment."
         />
         <StatusRow
           label="Archived"
           value={annotation.archived.status ? "Yes" : "No"}
           color={annotation.archived.status ? "red" : "blue"}
-          tooltip="Eligible if the guide has not been dismissed/archived by the user already"
+          tooltip="Whether the current user has dismissed this guide."
         />
         <StatusRow
           label="Targeting"
           value={annotation.targetable.status ? "Yes" : "No"}
           color={annotation.targetable.status ? "blue" : "red"}
-          tooltip="Eligible if the user meets the guide's targeting conditions"
+          tooltip="Whether the current user matches the guide's targeting conditions."
         />
       </CardContainer>
 
@@ -155,23 +162,28 @@ export const GuideRowDetails = ({
           label="Activation"
           value={annotation.activatable.status ? "Yes" : "No"}
           color={annotation.activatable.status ? "blue" : "red"}
-          tooltip="Visible when the user's current location matches the guide's activation rules"
+          tooltip="Whether the current page matches the guide's activation rules."
         />
         <StatusRow
           label="Display"
           value={selectableStatusSummary.label}
           color={selectableStatusSummary.color}
-          tooltip={
-            <Text as="span" size="1">
-              Visible when the guide is queried via `useGuide(s)` in the current
-              page,
-              <br />
-              and ready to display per its position in the display pipeline:
-              <br />
-              {selectableStatusSummary.description}
+          tooltip="Whether the guide has been queried and is ready to render on the current page."
+        >
+          <Tooltip
+            label={selectableStatusSummary.description}
+            {...sharedTooltipProps}
+          >
+            <Text
+              as="span"
+              size="1"
+              weight="medium"
+              color={selectableStatusSummary.color}
+            >
+              {selectableStatusSummary.label}
             </Text>
-          }
-        />
+          </Tooltip>
+        </StatusRow>
       </CardContainer>
     </Stack>
   );
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
index 3b1ef953a..3abbeb8cf 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -22,7 +22,12 @@ import "../styles.css";
 import { FocusChin } from "./FocusChin";
 import { GuideContextDetails } from "./GuideContextDetails";
 import { GuideRow } from "./GuideRow";
-import { DisplayOption, clearRunConfigLS, getRunConfig } from "./helpers";
+import {
+  DisplayOption,
+  clearRunConfigLS,
+  getRunConfig,
+  sharedTooltipProps,
+} from "./helpers";
 import { useDraggable } from "./useDraggable";
 import {
   InspectionResultOk,
@@ -158,7 +163,6 @@ export const V2 = () => {
       {isCollapsed ? (
         <Tooltip
           side="left"
-          delayDuration={500}
           label={
             <Text as="span" size="1">
               Guide Toolbar
@@ -167,6 +171,7 @@ export const V2 = () => {
               </Stack>
             </Text>
           }
+          {...sharedTooltipProps}
         >
           <Stack
             border="px"
@@ -306,7 +311,7 @@ export const V2 = () => {
                   {/* Note: `only-displayable` is not available for now */}
                 </SegmentedControl.Root>
 
-                <Tooltip label="Settings & target params">
+                <Tooltip label="Settings" {...sharedTooltipProps}>
                   <Button
                     size="1"
                     variant={isContextPanelOpen ? "outline" : "ghost"}
@@ -346,7 +351,7 @@ export const V2 = () => {
                 >
                   Exit
                 </Button>
-                <Tooltip label="Minimize toolbar">
+                <Tooltip label="Minimize toolbar" {...sharedTooltipProps}>
                   <Button
                     size="1"
                     variant="outline"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
index 99e8b2891..cd13e7c53 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
@@ -2,6 +2,10 @@ import { KnockGuide } from "@knocklabs/client";
 
 import { checkForWindow } from "../../../../../modules/core";
 
+export const sharedTooltipProps = {
+  delayDuration: 1000,
+};
+
 export type DisplayOption =
   | "all-guides"
   | "only-active"

From 8ad76d93223fbc0801437b07c475c1e966fe6d7c Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 14:33:15 -0400
Subject: [PATCH 3/8] just get rid of a tooltip on the disabled focus button

---
 .../guide/components/Toolbar/V2/GuideRow.tsx  | 45 +++++++------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
index 20849bc12..18019c12b 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -17,7 +17,7 @@ import {
   StatusSummary,
   getSelectableStatusSummary,
 } from "./GuideRowDetails";
-import { FOCUS_ERRORS, sharedTooltipProps } from "./helpers";
+import { sharedTooltipProps } from "./helpers";
 import {
   AnnotatedGuide,
   AnnotatedStatuses,
@@ -333,39 +333,24 @@ export const GuideRow = ({ guide, orderIndex, isExpanded, onClick }: Props) => {
             />
           </Pill>
 
-          <Tooltip
-            label={
-              isUncommittedGuide(guide)
-                ? FOCUS_ERRORS.focusUncommittedGuide
-                : guide.annotation.selectable.status === undefined
-                  ? FOCUS_ERRORS.focusUnselectableGuide
-                  : ""
-            }
-            enabled={
+          <Button
+            size="0"
+            variant={isFocused ? "solid" : "outline"}
+            color={isFocused ? "blue" : "gray"}
+            disabled={
               isUncommittedGuide(guide) ||
               guide.annotation.selectable.status === undefined
             }
-            {...sharedTooltipProps}
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+              client.setDebug({
+                ...debugSettings,
+                focusedGuideKeys: isFocused ? {} : { [guide.key]: true },
+              });
+            }}
           >
-            <Button
-              size="0"
-              variant={isFocused ? "solid" : "outline"}
-              color={isFocused ? "blue" : "gray"}
-              disabled={
-                isUncommittedGuide(guide) ||
-                guide.annotation.selectable.status === undefined
-              }
-              onClick={(e: React.MouseEvent) => {
-                e.stopPropagation();
-                client.setDebug({
-                  ...debugSettings,
-                  focusedGuideKeys: isFocused ? {} : { [guide.key]: true },
-                });
-              }}
-            >
-              Focus
-            </Button>
-          </Tooltip>
+            Focus
+          </Button>
         </Stack>
       </Stack>
 

From c15bae0ad811cf920f93a371f547e724c01a3a25 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 14:50:35 -0400
Subject: [PATCH 4/8] update empty state message

---
 .../guide/components/Toolbar/V2/V2.tsx        | 22 +++++++++++--------
 .../guide/components/Toolbar/V2/helpers.ts    |  6 +----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
index 3abbeb8cf..dd3b2bc0f 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -63,18 +63,23 @@ const Kbd = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
+const getEmptyStateMessage = (displayOption: DisplayOption) => {
+  switch (displayOption) {
+    case "all-guides":
+      return "You have no guides. Get started by creating a guide.";
+    case "only-active":
+      return "There are no active guides.";
+    case "only-eligible":
+      return "Your current user is not eligible for any guides.";
+  }
+};
+
 const filterGuides = (
   guides: InspectionResultOk["guides"],
   displayOption: DisplayOption,
 ) => {
   return guides.filter((guide) => {
-    const { isEligible, isQualified } = guide.annotation;
-    const isDisplayable = isEligible && isQualified;
-
-    if (displayOption === "only-displayable" && !isDisplayable) {
-      return false;
-    }
-    if (displayOption === "only-eligible" && !isEligible) {
+    if (displayOption === "only-eligible" && !guide.annotation.isEligible) {
       return false;
     }
     if (displayOption === "only-active" && !guide.annotation.active.status) {
@@ -308,7 +313,6 @@ export const V2 = () => {
                   >
                     Eligible
                   </SegmentedControl.Option>
-                  {/* Note: `only-displayable` is not available for now */}
                 </SegmentedControl.Root>
 
                 <Tooltip label="Settings" {...sharedTooltipProps}>
@@ -393,7 +397,7 @@ export const V2 = () => {
             ) : guides.length === 0 ? (
               <Box px="2" pb="1" style={{ lineHeight: "1.2" }}>
                 <Text as="span" size="1" weight="medium" color="default">
-                  No guides match the current filter.
+                  {getEmptyStateMessage(displayOption)}
                 </Text>
               </Box>
             ) : (
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
index cd13e7c53..c90dc2aee 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
@@ -6,11 +6,7 @@ export const sharedTooltipProps = {
   delayDuration: 1000,
 };
 
-export type DisplayOption =
-  | "all-guides"
-  | "only-active"
-  | "only-eligible"
-  | "only-displayable";
+export type DisplayOption = "all-guides" | "only-active" | "only-eligible";
 
 // Use this param to start Toolbar and enter into a debugging session when
 // it is present and set to true.

From 69b30eebf93eb5394456ba94c9f53a7777935e11 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 16:07:41 -0400
Subject: [PATCH 5/8] changeset

---
 .changeset/violet-heads-go.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/violet-heads-go.md

diff --git a/.changeset/violet-heads-go.md b/.changeset/violet-heads-go.md
new file mode 100644
index 000000000..d4b497c4d
--- /dev/null
+++ b/.changeset/violet-heads-go.md
@@ -0,0 +1,5 @@
+---
+"@knocklabs/react": patch
+---
+
+[Guides] Address more polish + feedback items in guide toolbar v2

From ce46e531c55e800168c4a0dd993a4b2870e5d9c2 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 17:49:36 -0400
Subject: [PATCH 6/8] cursor review feedback

---
 .../components/Toolbar/V2/GuideRowDetails.tsx | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
index b0295ef46..d9323a2ef 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
@@ -58,17 +58,19 @@ const StatusRow = ({
     <Stack align="center" gap="1">
       <Stack as="span" align="center" gap="1" display="inline-flex">
         <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>
-          <StatusDot color={color} tooltip={`${label}: ${value}`} />
-          <Text as="span" size="1" weight="medium">
-            {label}:
-          </Text>
-          {/* User children over value when provided, for cases when we want to
-              have its own tooltip over it */}
-          {!children && (
-            <Text as="span" size="1" weight="medium" color={color}>
-              {value}
+          <Stack gap="1">
+            <StatusDot color={color} tooltip={`${label}: ${value}`} />
+            <Text as="span" size="1" weight="medium">
+              {label}:
             </Text>
-          )}
+            {/* User children over value when provided, for cases when we want to
+                have its own tooltip over it */}
+            {!children && (
+              <Text as="span" size="1" weight="medium" color={color}>
+                {value}
+              </Text>
+            )}
+          </Stack>
         </Tooltip>
         {children}
       </Stack>

From 180a63bdee52411c2fba781d9b7eaf1877cbc4c8 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 17:56:40 -0400
Subject: [PATCH 7/8] margin tweak

---
 .../src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
index d9323a2ef..6c4f8987d 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
@@ -35,7 +35,7 @@ const CardContainer = ({
     <Text as="span" size="0" color="gray" weight="medium">
       {title}
     </Text>
-    <Stack direction="column" gap="1" mt="1">
+    <Stack direction="column" gap="1">
       {children}
     </Stack>
   </Stack>

From c02e6009e94c89b7b8b4b429b6a8ceb1b0fbe9d8 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 2 Apr 2026 18:03:13 -0400
Subject: [PATCH 8/8] more style fix

---
 .../components/Toolbar/V2/GuideRowDetails.tsx | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
index 6c4f8987d..d89c499db 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
@@ -56,24 +56,22 @@ const StatusRow = ({
 }) => {
   return (
     <Stack align="center" gap="1">
-      <Stack as="span" align="center" gap="1" display="inline-flex">
-        <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>
-          <Stack gap="1">
-            <StatusDot color={color} tooltip={`${label}: ${value}`} />
-            <Text as="span" size="1" weight="medium">
-              {label}:
+      <Tooltip enabled={!!tooltip} label={tooltip} {...sharedTooltipProps}>
+        <Stack align="center" gap="1" display="inline-flex">
+          <StatusDot color={color} tooltip={`${label}: ${value}`} />
+          <Text as="span" size="1" weight="medium">
+            {label}:
+          </Text>
+          {/* User children over value when provided, for cases when we want to
+              have its own tooltip over it */}
+          {!children && (
+            <Text as="span" size="1" weight="medium" color={color}>
+              {value}
             </Text>
-            {/* User children over value when provided, for cases when we want to
-                have its own tooltip over it */}
-            {!children && (
-              <Text as="span" size="1" weight="medium" color={color}>
-                {value}
-              </Text>
-            )}
-          </Stack>
-        </Tooltip>
-        {children}
-      </Stack>
+          )}
+        </Stack>
+      </Tooltip>
+      {children}
     </Stack>
   );
 };