From ce763671bb0867e55eb4fdb7305a2189e7b1b933 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 18 Feb 2026 15:53:17 -0500
Subject: [PATCH 1/5] add only-displaying vs only-displayable options

---
 .../Toolbar/V2/GuidesListDisplaySelect.tsx       | 11 +++++++++--
 .../modules/guide/components/Toolbar/V2/V2.tsx   | 16 ++++++++++------
 .../Toolbar/V2/useInspectGuideClientStore.ts     |  6 ++++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
index 2b7c51324..bc0ae13f3 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
@@ -2,7 +2,11 @@ import { Select } from "@telegraph/select";
 
 import { TOOLBAR_Z_INDEX } from "../shared";
 
-export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
+export type DisplayOption =
+  | "only-displaying"
+  | "only-displayable"
+  | "all-eligible"
+  | "all-guides";
 
 type Props = {
   value: DisplayOption;
@@ -22,7 +26,10 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
         style: { zIndex: TOOLBAR_Z_INDEX },
       }}
     >
-      <Select.Option size="1" value="current-page">
+      <Select.Option size="1" value="only-displaying">
+        Displaying on current page
+      </Select.Option>
+      <Select.Option size="1" value="only-displayable">
         Displayable on current page
       </Select.Option>
       <Select.Option size="1" value="all-eligible">
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 1a885fd75..340c365ae 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -27,13 +27,17 @@ const GuidesList = ({
   displayOption: DisplayOption;
 }) => {
   return guides.map((guide, idx) => {
-    if (
-      displayOption === "current-page" &&
-      (!guide.annotation.isEligible || !guide.annotation.isQualified)
-    ) {
+    const { isEligible, isQualified, selectable } = guide.annotation;
+    const isDisplayable = isEligible && isQualified;
+    const isDisplaying = isDisplayable && selectable.status === "returned";
+
+    if (displayOption === "only-displaying" && !isDisplaying) {
+      return null;
+    }
+    if (displayOption === "only-displayable" && !isDisplayable) {
       return null;
     }
-    if (displayOption === "all-eligible" && !guide.annotation.isEligible) {
+    if (displayOption === "all-eligible" && !isEligible) {
       return null;
     }
 
@@ -45,7 +49,7 @@ export const V2 = () => {
   const { client } = useGuideContext();
 
   const [guidesListDisplayOption, setGuidesListDisplayOption] =
-    React.useState<DisplayOption>("current-page");
+    React.useState<DisplayOption>("only-displayable");
 
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
index 388c7c55c..f11fadd6f 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
@@ -107,6 +107,9 @@ export type UnknownGuide = {
   annotation: {
     isEligible: false;
     isQualified: false;
+    selectable: {
+      status: undefined;
+    };
   };
 };
 
@@ -383,6 +386,9 @@ const newUnknownGuide = (key: KnockGuide["key"]) =>
     annotation: {
       isEligible: false,
       isQualified: false,
+      selectable: {
+        status: undefined,
+      },
     },
   }) as UnknownGuide;
 

From 77c18390ff195ff82b9bb87be8d07802faf04a7b Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 18 Feb 2026 17:46:27 -0500
Subject: [PATCH 2/5] move up GuideHoverCard to wrap both order idx and guide
 name

---
 .../components/Toolbar/V2/GuideHoverCard.tsx  |  2 +-
 .../guide/components/Toolbar/V2/GuideRow.tsx  | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
index d941891f0..e305dec54 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -34,7 +34,7 @@ export const GuideHoverCard = ({
         <Stack align="center">{children}</Stack>
       </HoverCard.Trigger>
       <HoverCard.Portal>
-        <HoverCard.Content sideOffset={44} side="left">
+        <HoverCard.Content sideOffset={16} side="left">
           <Box
             px="2"
             shadow="2"
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 c29a9568c..8107dee45 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -34,20 +34,20 @@ type Props = {
 export const GuideRow = ({ guide, orderIndex }: Props) => {
   return (
     <Row>
-      <Stack h="6" justify="flex-start" align="center" gap="2">
-        <Tag
-          size="0"
-          variant="soft"
-          color={guide.bypass_global_group_limit ? "blue" : "default"}
-        >
-          {orderIndex + 1}
-        </Tag>
-        <GuideHoverCard guide={guide}>
+      <GuideHoverCard guide={guide}>
+        <Stack h="6" justify="flex-start" align="center" gap="2">
+          <Tag
+            size="0"
+            variant="soft"
+            color={guide.bypass_global_group_limit ? "blue" : "default"}
+          >
+            {orderIndex + 1}
+          </Tag>
           <Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
             {guide.key}
           </Text>
-        </GuideHoverCard>
-      </Stack>
+        </Stack>
+      </GuideHoverCard>
 
       <Stack justify="flex-end">
         {!isUnknownGuide(guide) && (

From 0aecaa40cc852e61321a073e2022aaac087ca43a Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 18 Feb 2026 17:47:30 -0500
Subject: [PATCH 3/5] remove dimmed text color for inactive guides

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

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 8107dee45..37bc18d56 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -43,7 +43,7 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
           >
             {orderIndex + 1}
           </Tag>
-          <Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
+          <Text as="code" size="1">
             {guide.key}
           </Text>
         </Stack>

From 39253e9de6d84274fad01ff7783511de72b22c8c Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 18 Feb 2026 19:33:33 -0500
Subject: [PATCH 4/5] add GuideContextDetails to V2 toolbar

---
 .../Toolbar/V2/GuideContextDetails.tsx        | 100 ++++++++++++++++++
 .../guide/components/Toolbar/V2/V2.tsx        |   2 +
 2 files changed, 102 insertions(+)
 create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx

diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
new file mode 100644
index 000000000..5b60e019e
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -0,0 +1,100 @@
+import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { Box, Stack } from "@telegraph/layout";
+import { Text } from "@telegraph/typography";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import * as React from "react";
+
+export const GuideContextDetails = () => {
+  const { client } = useGuideContext();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);
+  const displayInterval = defaultGroup?.display_interval ?? null;
+
+  return (
+    <Stack direction="column" borderTop="px">
+      <Stack
+        h="5"
+        px="2"
+        bg="gray-3"
+        align="center"
+        gap="1"
+        style={{ cursor: "pointer" }}
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <Text as="span" size="0" weight="medium">
+          Details
+        </Text>
+        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+      </Stack>
+
+      {isExpanded && (
+        <Stack direction="column">
+          <Stack direction="column" gap="0_5" py="1" px="2" borderTop="px">
+            <Text as="span" size="0" weight="medium">
+              Throttle
+            </Text>
+            <Text as="code" size="0">
+              {displayInterval === null ? "-" : `Every ${displayInterval}s`}
+            </Text>
+          </Stack>
+
+          <Stack direction="column" py="1" px="2" borderTop="px">
+            <Text as="span" size="0" weight="medium">
+              Target params
+            </Text>
+            <Stack direction="column" gap="0_5" mt="1">
+              <Text as="span" size="0" color="gray">
+                Tenant
+              </Text>
+              <Text as="code" size="0">
+                {client.targetParams.tenant ? (
+                  <Box
+                    rounded="2"
+                    overflow="auto"
+                    backgroundColor="gray-2"
+                    border="px"
+                    style={{ maxHeight: "200px" }}
+                  >
+                    <pre style={{ fontSize: "11px", margin: 0 }}>
+                      <code>{client.targetParams.tenant}</code>
+                    </pre>
+                  </Box>
+                ) : (
+                  <Text as="code" size="0">
+                    -
+                  </Text>
+                )}
+              </Text>
+            </Stack>
+
+            <Stack direction="column" gap="0_5">
+              <Text as="span" size="0" color="gray">
+                Data
+              </Text>
+              {client.targetParams.data ? (
+                <Box
+                  rounded="2"
+                  overflow="auto"
+                  backgroundColor="gray-2"
+                  border="px"
+                  style={{ maxHeight: "200px" }}
+                >
+                  <pre style={{ fontSize: "11px", margin: 0 }}>
+                    <code>
+                      {JSON.stringify(client.targetParams.data, null, 2)}
+                    </code>
+                  </pre>
+                </Box>
+              ) : (
+                <Text as="code" size="0">
+                  -
+                </Text>
+              )}
+            </Stack>
+          </Stack>
+        </Stack>
+      )}
+    </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 340c365ae..59a2aa397 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -8,6 +8,7 @@ import { KnockButton } from "../KnockButton";
 import { TOOLBAR_Z_INDEX } from "../shared";
 import "../styles.css";
 
+import { GuideContextDetails } from "./GuideContextDetails";
 import { GuideRow } from "./GuideRow";
 import {
   DisplayOption,
@@ -119,6 +120,7 @@ export const V2 = () => {
 
           <Box w="full">
             {result.error && <Box>{result.error}</Box>}
+            <GuideContextDetails />
             <GuidesList
               guides={result.guides}
               displayOption={guidesListDisplayOption}

From 56dde68440e54e32688932918e1343f6b2de5fb3 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 19 Feb 2026 16:37:56 -0500
Subject: [PATCH 5/5] changeset

---
 .changeset/wet-berries-tease.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/wet-berries-tease.md

diff --git a/.changeset/wet-berries-tease.md b/.changeset/wet-berries-tease.md
new file mode 100644
index 000000000..12906cfb0
--- /dev/null
+++ b/.changeset/wet-berries-tease.md
@@ -0,0 +1,8 @@
+---
+"@knocklabs/react": patch
+"guide-example": patch
+"@knocklabs/client": patch
+"@knocklabs/react-core": patch
+---
+
+[guides] add guide toolbar v2 poc