From 931187136ca97460412c89f3f821d40c799d8c40 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Fri, 23 Jan 2026 10:11:13 -0500
Subject: [PATCH 1/4] add guides list w/ targeting and archived indicators

---
 packages/client/src/clients/guide/index.ts    |   2 +
 packages/react/package.json                   |   2 +
 .../components/Toolbar/V2/GuideHoverCard.tsx  |  47 ++++++
 .../guide/components/Toolbar/V2/GuideRow.tsx  |  96 +++++++++++
 .../Toolbar/V2/GuidesListDisplaySelect.tsx    |  38 +++++
 .../guide/components/Toolbar/V2/V2.tsx        |  62 ++++---
 .../Toolbar/V2/useInspectGuideClientStore.ts  | 155 ++++++++++++++++++
 yarn.lock                                     | 140 ++++++++++++++++
 8 files changed, 518 insertions(+), 24 deletions(-)
 create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
 create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
 create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
 create mode 100644 packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts

diff --git a/packages/client/src/clients/guide/index.ts b/packages/client/src/clients/guide/index.ts
index 0f959ae8b..ddcb5e288 100644
--- a/packages/client/src/clients/guide/index.ts
+++ b/packages/client/src/clients/guide/index.ts
@@ -2,8 +2,10 @@ export { KnockGuideClient, DEBUG_QUERY_PARAMS } from "./client";
 export type {
   KnockGuide,
   KnockGuideStep,
+  GuideIneligibilityMarker as KnockGuideIneligibilityMarker,
   TargetParams as KnockGuideTargetParams,
   SelectFilterParams as KnockGuideFilterParams,
   SelectGuideOpts as KnockSelectGuideOpts,
   SelectGuidesOpts as KnockSelectGuidesOpts,
+  StoreState as KnockGuideClientStoreState,
 } from "./types";
diff --git a/packages/react/package.json b/packages/react/package.json
index 74276b2db..4ca8efc64 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -76,10 +76,12 @@
     "@knocklabs/react-core": "workspace:^",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@telegraph/combobox": "^0.1.16",
     "@telegraph/icon": "^0.2.7",
     "@telegraph/layout": "^0.2.3",
     "@telegraph/tokens": "^0.1.2",
+    "@telegraph/tooltip": "0.0.61",
     "@telegraph/typography": "^0.1.25",
     "clsx": "^2.1.1",
     "lodash.debounce": "^4.0.8"
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
new file mode 100644
index 000000000..f4919ca59
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -0,0 +1,47 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { Box, Stack } from "@telegraph/layout";
+import * as React from "react";
+
+import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
+
+type Props = {
+  guide: InspectedGuide | MissingGuide;
+};
+
+export const GuideHoverCard = ({
+  children,
+  guide,
+}: React.PropsWithChildren<Props>) => {
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger>
+        <Stack align="center">{children}</Stack>
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content sideOffset={44} side="left">
+          <Box
+            px="2"
+            shadow="2"
+            rounded="3"
+            border="px"
+            overflow="auto"
+            style={{
+              width: "450px",
+              maxHeight: "600px",
+            }}
+          >
+            <pre
+              style={{
+                fontSize: "12px",
+              }}
+            >
+              {/* TODO: Prune some details */}
+              <code>{JSON.stringify(guide, null, 2)}</code>
+            </pre>
+          </Box>
+          <HoverCard.Arrow />
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  );
+};
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
new file mode 100644
index 000000000..20d2f8c0b
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -0,0 +1,96 @@
+import { Button } from "@telegraph/button";
+import { Stack } from "@telegraph/layout";
+import { Tag } from "@telegraph/tag";
+import { Tooltip } from "@telegraph/tooltip";
+import { Text } from "@telegraph/typography";
+import { CheckCircle2, CircleDashed, Eye, UserCircle2 } from "lucide-react";
+import * as React from "react";
+
+import { GuideHoverCard } from "./GuideHoverCard";
+import { InspectedGuide, MissingGuide } from "./useInspectGuideClientStore";
+
+const Row = ({ children }: React.PropsWithChildren) => (
+  <Stack h="7" px="2" borderTop="px" justify="space-between" align="center">
+    {children}
+  </Stack>
+);
+
+type Props = {
+  guide: MissingGuide | InspectedGuide;
+  orderIndex: number;
+};
+
+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}>
+          <Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
+            {guide.key}
+          </Text>
+        </GuideHoverCard>
+      </Stack>
+
+      <Stack gap="1" justify="flex-end">
+        {guide.__typename === "Guide" && (
+          <>
+            <Tooltip
+              label={
+                !guide.inspection.targetable.status &&
+                guide.inspection.targetable.message
+              }
+              enabled={!guide.inspection.targetable.status}
+            >
+              <Button
+                px="1"
+                size="1"
+                variant="soft"
+                color={guide.inspection.targetable.status ? "green" : "red"}
+                leadingIcon={{ icon: UserCircle2, alt: "Target" }}
+              />
+            </Tooltip>
+            <Tooltip
+              label="User has already archived this guide"
+              enabled={guide.inspection.archived.status}
+            >
+              <Button
+                px="1"
+                size="1"
+                variant="soft"
+                color={guide.inspection.archived.status ? "red" : "green"}
+                leadingIcon={{ icon: Eye, alt: "Not archived" }}
+              />
+            </Tooltip>
+          </>
+        )}
+        <Tooltip
+          label={
+            guide.__typename === "MissingGuide"
+              ? "This guide has never been committed and published yet"
+              : "This guide is not active"
+          }
+          enabled={!guide.active}
+        >
+          <Button
+            px="1"
+            size="1"
+            variant="soft"
+            color={guide.active ? "green" : "red"}
+            leadingIcon={
+              guide.active
+                ? { icon: CheckCircle2, alt: "Active" }
+                : { icon: CircleDashed, alt: "Inactive" }
+            }
+          />
+        </Tooltip>
+      </Stack>
+    </Row>
+  );
+};
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
new file mode 100644
index 000000000..c6bf61cc8
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
@@ -0,0 +1,38 @@
+import { Select } from "@telegraph/select";
+
+import { MAX_Z_INDEX } from "../shared";
+
+export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
+
+type Props = {
+  value: DisplayOption;
+  onChange: (option: DisplayOption) => void;
+};
+
+export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
+  return (
+    <Select.Root
+      size="1"
+      value={value}
+      onValueChange={(value) => {
+        if (!value) return;
+        onChange(value as DisplayOption);
+      }}
+      contentProps={{
+        style: { zIndex: MAX_Z_INDEX },
+      }}
+    >
+      {/*
+        <Select.Option size="1" value="current-page">
+          Present and activated on current page
+        </Select.Option>
+      */}
+      <Select.Option size="1" value="all-eligible">
+        All eligible guides for user
+      </Select.Option>
+      <Select.Option size="1" value="all-guides">
+        All existing guides
+      </Select.Option>
+    </Select.Root>
+  );
+};
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 b282c75f9..86bc98ac7 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -1,36 +1,30 @@
-import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { useGuideContext } from "@knocklabs/react-core";
 import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
-import { Text } from "@telegraph/typography";
 import { Minimize2, Undo2 } from "lucide-react";
 import React from "react";
 
 import { KnockButton } from "../KnockButton";
-import { MAX_Z_INDEX } from "../shared";
+// import { MAX_Z_INDEX } from "../shared";
 import "../styles.css";
 
+import { GuideRow } from "./GuideRow";
+import {
+  DisplayOption,
+  GuidesListDisplaySelect,
+} from "./GuidesListDisplaySelect";
 import { detectToolbarParam } from "./helpers";
-
-const useInspectGuideClientStore = () => {
-  const { client } = useGuideContext();
-
-  const snapshot = useStore(client.store, (state) => {
-    return {
-      debug: state.debug,
-    };
-  });
-
-  if (!snapshot.debug?.debugging) {
-    return;
-  }
-
-  // TODO: Transform the raw client state into more useful data for debugging.
-  return {};
-};
+import {
+  checkEligible,
+  useInspectGuideClientStore,
+} from "./useInspectGuideClientStore";
 
 export const V2 = () => {
   const { client } = useGuideContext();
 
+  const [guidesListDisplayed, setGuidesListDisplayed] =
+    React.useState<DisplayOption>("all-eligible");
+
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
 
@@ -53,11 +47,14 @@ export const V2 = () => {
 
   return (
     <Box
+      id="knock-guide-toolbar-v2"
       position="fixed"
       top="4"
       right="4"
       style={{
-        zIndex: MAX_Z_INDEX,
+        // zIndex: MAX_Z_INDEX
+        // Match the hardcoded z-index value in tooltip
+        zIndex: 1800,
       }}
     >
       {isCollapsed ? (
@@ -80,9 +77,10 @@ export const V2 = () => {
             style={{ boxSizing: "border-box" }}
           >
             <Box style={{ width: "220px" }}>
-              <Text as="div" size="1" weight="medium" w="full" maxWidth="40">
-                Toolbar v2 placeholder
-              </Text>
+              <GuidesListDisplaySelect
+                value={guidesListDisplayed}
+                onChange={(selected) => setGuidesListDisplayed(selected)}
+              />
             </Box>
 
             <Stack gap="2">
@@ -102,6 +100,22 @@ export const V2 = () => {
               />
             </Stack>
           </Stack>
+
+          <Box w="full">
+            {data.error && <Box>{data.error}</Box>}
+            {data.guides.map((guide, idx) => {
+              if (
+                guidesListDisplayed === "all-eligible" &&
+                !checkEligible(guide)
+              ) {
+                return null;
+              }
+
+              return (
+                <GuideRow key={guide.key} guide={guide} orderIndex={idx} />
+              );
+            })}
+          </Box>
         </Stack>
       )}
     </Box>
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
new file mode 100644
index 000000000..3f9141930
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
@@ -0,0 +1,155 @@
+import {
+  KnockGuide,
+  KnockGuideClientStoreState,
+  KnockGuideIneligibilityMarker,
+} from "@knocklabs/client";
+import { useGuideContext, useStore } from "@knocklabs/react-core";
+
+type ActiveStatus = {
+  status: boolean;
+};
+
+type TargetableStatusTrue = {
+  status: true;
+};
+type TargetableStatusFalse = {
+  status: false;
+  reason: string;
+  message: string;
+};
+type TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;
+
+type ArchivedStatus = {
+  status: boolean;
+};
+
+export type InspectedGuide = KnockGuide & {
+  inspection: {
+    // true status = good
+    active: ActiveStatus;
+    targetable: TargetableStatus;
+
+    // false status = good
+    archived: ArchivedStatus;
+  };
+};
+
+export const checkEligible = (guide: InspectedGuide | MissingGuide) => {
+  if (guide.__typename === "MissingGuide") return false;
+  if (!guide.inspection.active.status) return false;
+  if (!guide.inspection.targetable.status) return false;
+  if (guide.inspection.archived.status) return false;
+
+  return true;
+};
+
+// Exists and ordered in control but absent in switchboard (therefore not
+// included in the api response), which implies a newly created guide that has
+// never been published to switchboard.
+export type MissingGuide = {
+  __typename: "MissingGuide";
+  key: KnockGuide["key"];
+  active: false;
+  bypass_global_group_limit: false;
+};
+
+export type InspectionResult = {
+  guides: (InspectedGuide | MissingGuide)[];
+  error?: "no_guide_group";
+};
+
+const toTargetableStatus = (
+  marker: KnockGuideIneligibilityMarker,
+): TargetableStatus => {
+  switch (marker.reason) {
+    case "target_conditions_not_met":
+    case "not_in_target_audience":
+      return {
+        status: false,
+        reason: marker.reason,
+        message: marker.message,
+      };
+
+    default:
+      return {
+        status: true,
+      };
+  }
+};
+
+const toArchivedStatus = (
+  marker: KnockGuideIneligibilityMarker,
+): ArchivedStatus => {
+  return {
+    status: marker.reason === "marked_as_archived",
+  };
+};
+
+const inspectGuide = (
+  guide: KnockGuide,
+  ineligibleGuides: KnockGuideClientStoreState["ineligibleGuides"],
+): InspectedGuide => {
+  const marker = ineligibleGuides[guide.key];
+
+  const inspection: InspectedGuide["inspection"] = {
+    active: { status: guide.active },
+    targetable: marker ? toTargetableStatus(marker) : { status: true },
+    archived: marker ? toArchivedStatus(marker) : { status: false },
+  };
+
+  return {
+    ...guide,
+    inspection,
+  };
+};
+
+const newMissingGuide = (key: KnockGuide["key"]) =>
+  ({
+    __typename: "MissingGuide",
+    key,
+    active: false,
+    bypass_global_group_limit: false,
+  }) as MissingGuide;
+
+export const useInspectGuideClientStore = (): InspectionResult | undefined => {
+  const { client } = useGuideContext();
+
+  // Extract a snapshot of the client store state for debugging.
+  const snapshot = useStore(client.store, (state) => {
+    return {
+      guides: state.guides,
+      guideGroups: state.guideGroups,
+      ineligibleGuides: state.ineligibleGuides,
+      debug: state.debug,
+    };
+  });
+
+  // Not in debugging session, so noop.
+  if (!snapshot.debug?.debugging) {
+    return undefined;
+  }
+
+  // Just for completeness, as there should always be a default group so this
+  // should never happen.
+  const defaultGroup = snapshot.guideGroups[0];
+  if (!defaultGroup) {
+    return {
+      error: "no_guide_group",
+      guides: [],
+    };
+  }
+
+  // Transform the raw snapshot into something more useful for debugging.
+  const orderedGuides = defaultGroup.display_sequence.map((guideKey) => {
+    const guide = snapshot.guides[guideKey];
+    if (!guide) {
+      return newMissingGuide(guideKey);
+    }
+
+    return inspectGuide(guide, snapshot.ineligibleGuides);
+  });
+
+  return {
+    guides: orderedGuides,
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index 9ec279142..789c5435a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4245,11 +4245,13 @@ __metadata:
     "@knocklabs/react-core": "workspace:^"
     "@popperjs/core": "npm:^2.11.8"
     "@radix-ui/react-dialog": "npm:^1.1.15"
+    "@radix-ui/react-hover-card": "npm:^1.1.15"
     "@tanstack/react-router": "npm:1.134.12"
     "@telegraph/combobox": "npm:^0.1.16"
     "@telegraph/icon": "npm:^0.2.7"
     "@telegraph/layout": "npm:^0.2.3"
     "@telegraph/tokens": "npm:^0.1.2"
+    "@telegraph/tooltip": "npm:0.0.61"
     "@telegraph/typography": "npm:^0.1.25"
     "@testing-library/dom": "npm:^10.4.1"
     "@testing-library/react": "npm:^16.3.0"
@@ -5019,6 +5021,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-hover-card@npm:^1.1.15":
+  version: 1.1.15
+  resolution: "@radix-ui/react-hover-card@npm:1.1.15"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.3"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.11"
+    "@radix-ui/react-popper": "npm:1.2.8"
+    "@radix-ui/react-portal": "npm:1.1.9"
+    "@radix-ui/react-presence": "npm:1.1.5"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/c44ab88b0c62a3c1bf274b72e5cc3f5a6aea571a52bf2fcb2d471e1336738adabdbd10c26c8e72071cad444704ac28fcf2679d43132b69279564ad689839cf4e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.1.1":
   version: 1.1.1
   resolution: "@radix-ui/react-id@npm:1.1.1"
@@ -6682,6 +6711,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/compose-refs@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@telegraph/compose-refs@npm:0.0.8"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/f2333ae73b258cf1c8873d818322a4a9e29c40649c23231fc678d9f20937099ae2c6cf6aa95591a2e9d60ac141b17d5f3b6c645a95aa36e77afda71018888f98
+  languageName: node
+  linkType: hard
+
 "@telegraph/helpers@npm:0.0.13, @telegraph/helpers@npm:^0.0.13":
   version: 0.0.13
   resolution: "@telegraph/helpers@npm:0.0.13"
@@ -6692,6 +6731,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/helpers@npm:^0.0.14":
+  version: 0.0.14
+  resolution: "@telegraph/helpers@npm:0.0.14"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/08d25ae95a016d095c290393bcc3b99c356029f5b6d3454b4eedb98f0cab5bdeafabbdc962d5d7a94afaad1c044c6262a4c72bad0725ca9d5c583941b3e840d8
+  languageName: node
+  linkType: hard
+
+"@telegraph/helpers@npm:^0.0.15":
+  version: 0.0.15
+  resolution: "@telegraph/helpers@npm:0.0.15"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/a5e9e80f9dfb9c00ee808fc5e6123a47c01eec94104ec02f44711c40785e3b0062d198a071a8b633fd67fe992b6c1bfb7f42a84d982b67296e10da128241256f
+  languageName: node
+  linkType: hard
+
 "@telegraph/icon@npm:^0.2.7":
   version: 0.2.7
   resolution: "@telegraph/icon@npm:0.2.7"
@@ -6739,6 +6798,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/layout@npm:^0.3.2, @telegraph/layout@npm:^0.3.3":
+  version: 0.3.3
+  resolution: "@telegraph/layout@npm:0.3.3"
+  dependencies:
+    "@telegraph/compose-refs": "npm:^0.0.8"
+    "@telegraph/helpers": "npm:^0.0.15"
+    "@telegraph/style-engine": "npm:^0.2.2"
+    clsx: "npm:^2.1.1"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/b088a50b95624021373329080794e7524b2e85f4e8db97ff84c91213bbb64b9a23a4774e31d920e9817e16c25921bbd27534c144ac4aec0b5e39ce03fc863736
+  languageName: node
+  linkType: hard
+
 "@telegraph/menu@npm:^0.1.13":
   version: 0.1.13
   resolution: "@telegraph/menu@npm:0.1.13"
@@ -6784,6 +6858,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/style-engine@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "@telegraph/style-engine@npm:0.2.2"
+  dependencies:
+    "@telegraph/tokens": "npm:^0.1.3"
+    postcss: "npm:^8.5.6"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/22fd9eb2c72b1485018cecdb327834995b04dede9d45e31000f5c27e98a5c691eda172e117b6a28300a4d78a21738d3020aabc07eec76346f390e7a396311e73
+  languageName: node
+  linkType: hard
+
 "@telegraph/tag@npm:^0.0.107":
   version: 0.0.107
   resolution: "@telegraph/tag@npm:0.0.107"
@@ -6827,6 +6914,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/tokens@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@telegraph/tokens@npm:0.1.3"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+  checksum: 10c0/a16025211fbf8ff372e8b3e778c396620d7edcd9b062ea243e3bd67a971eb72c651b82b1917ea052d2b433de64d825c80e8eec99aec066d1f61a3324e6903820
+  languageName: node
+  linkType: hard
+
+"@telegraph/tooltip@npm:0.0.61":
+  version: 0.0.61
+  resolution: "@telegraph/tooltip@npm:0.0.61"
+  dependencies:
+    "@radix-ui/react-tooltip": "npm:^1.2.8"
+    "@radix-ui/react-use-controllable-state": "npm:^1.2.2"
+    "@telegraph/appearance": "npm:^0.0.11"
+    "@telegraph/helpers": "npm:^0.0.14"
+    "@telegraph/layout": "npm:^0.3.2"
+    "@telegraph/typography": "npm:^0.1.28"
+    motion: "npm:^12.23.12"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/ca28b807f7d37b9dcc9ce58d4ca58f2b49202f306ba4c66b4c582ab4c64a6b34b2a6041aefc1175c9701328e1f9dadb041b46f5ecb04e230a48fe60a69e64297
+  languageName: node
+  linkType: hard
+
 "@telegraph/tooltip@npm:^0.0.58":
   version: 0.0.58
   resolution: "@telegraph/tooltip@npm:0.0.58"
@@ -6874,6 +6988,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@telegraph/typography@npm:^0.1.28":
+  version: 0.1.29
+  resolution: "@telegraph/typography@npm:0.1.29"
+  dependencies:
+    "@telegraph/helpers": "npm:^0.0.15"
+    "@telegraph/layout": "npm:^0.3.3"
+    "@telegraph/style-engine": "npm:^0.2.2"
+    clsx: "npm:^2.1.1"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  checksum: 10c0/30cb430393f385098c2b3289960d2f2ebf6e7f1c9a80657e75abfe4f851b8a31f3187c57189d175dc447372ee7a7aa4a11b3312df92f8101a7eb819ba8953e1a
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^10.4.1":
   version: 10.4.1
   resolution: "@testing-library/dom@npm:10.4.1"
@@ -16452,6 +16581,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.5.6":
+  version: 8.5.6
+  resolution: "postcss@npm:8.5.6"
+  dependencies:
+    nanoid: "npm:^3.3.11"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/5127cc7c91ed7a133a1b7318012d8bfa112da9ef092dddf369ae699a1f10ebbd89b1b9f25f3228795b84585c72aabd5ced5fc11f2ba467eedf7b081a66fad024
+  languageName: node
+  linkType: hard
+
 "postcss@npm:~8.4.32":
   version: 8.4.49
   resolution: "postcss@npm:8.4.49"

From 29661f1642368f8501f3bfbae602245e271db275 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Fri, 23 Jan 2026 12:01:35 -0500
Subject: [PATCH 2/4] style tweaks

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

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 f4919ca59..932850b56 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -25,6 +25,7 @@ export const GuideHoverCard = ({
             rounded="3"
             border="px"
             overflow="auto"
+            backgroundColor="surface-2"
             style={{
               width: "450px",
               maxHeight: "600px",
@@ -32,7 +33,7 @@ export const GuideHoverCard = ({
           >
             <pre
               style={{
-                fontSize: "12px",
+                fontSize: "11px",
               }}
             >
               {/* TODO: Prune some details */}

From f2e2d3c5d802946a5628a4bea96ac9abdc60f67a Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 4 Feb 2026 16:38:53 -0500
Subject: [PATCH 3/4] bring over select downstream changes into this PR

---
 .../components/Toolbar/V2/GuideHoverCard.tsx  |  2 +-
 .../guide/components/Toolbar/V2/GuideRow.tsx  | 21 ++++++++++++-------
 .../Toolbar/V2/GuidesListDisplaySelect.tsx    |  2 +-
 3 files changed, 15 insertions(+), 10 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 932850b56..7216f6713 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -36,7 +36,7 @@ export const GuideHoverCard = ({
                 fontSize: "11px",
               }}
             >
-              {/* TODO: Prune some details */}
+              {/* XXX: Prune some details */}
               <code>{JSON.stringify(guide, null, 2)}</code>
             </pre>
           </Box>
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 20d2f8c0b..aa5e01b5e 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -38,15 +38,16 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
         </GuideHoverCard>
       </Stack>
 
-      <Stack gap="1" justify="flex-end">
+      <Stack gap="1">
         {guide.__typename === "Guide" && (
           <>
             <Tooltip
               label={
-                !guide.inspection.targetable.status &&
-                guide.inspection.targetable.message
+                guide.inspection.targetable.status
+                  ? "This user is targeted"
+                  : guide.inspection.targetable.message
               }
-              enabled={!guide.inspection.targetable.status}
+              // enabled={!guide.inspection.targetable.status}
             >
               <Button
                 px="1"
@@ -57,8 +58,11 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
               />
             </Tooltip>
             <Tooltip
-              label="User has already archived this guide"
-              enabled={guide.inspection.archived.status}
+              label={
+                guide.inspection.archived.status
+                  ? "User has already archived this guide"
+                  : "User has not dismissed this guide"
+              }
             >
               <Button
                 px="1"
@@ -74,9 +78,10 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
           label={
             guide.__typename === "MissingGuide"
               ? "This guide has never been committed and published yet"
-              : "This guide is not active"
+              : !guide.active
+                ? "This guide is not active"
+                : "This guide is active"
           }
-          enabled={!guide.active}
         >
           <Button
             px="1"
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 c6bf61cc8..0f78439b3 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
@@ -24,7 +24,7 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
     >
       {/*
         <Select.Option size="1" value="current-page">
-          Present and activated on current page
+          Displayable on current page
         </Select.Option>
       */}
       <Select.Option size="1" value="all-eligible">

From 3a56f712ced228c71ace4ad61012df1ca0ddc7a5 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 4 Feb 2026 16:48:13 -0500
Subject: [PATCH 4/4] upstream more changes

---
 .../guide/components/Toolbar/V2/GuideRow.tsx  | 114 +++++++++---------
 1 file changed, 58 insertions(+), 56 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 aa5e01b5e..c7fe52c57 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -38,63 +38,65 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
         </GuideHoverCard>
       </Stack>
 
-      <Stack gap="1">
-        {guide.__typename === "Guide" && (
-          <>
-            <Tooltip
-              label={
-                guide.inspection.targetable.status
-                  ? "This user is targeted"
-                  : guide.inspection.targetable.message
-              }
-              // enabled={!guide.inspection.targetable.status}
-            >
-              <Button
-                px="1"
-                size="1"
-                variant="soft"
-                color={guide.inspection.targetable.status ? "green" : "red"}
-                leadingIcon={{ icon: UserCircle2, alt: "Target" }}
-              />
-            </Tooltip>
-            <Tooltip
-              label={
-                guide.inspection.archived.status
-                  ? "User has already archived this guide"
-                  : "User has not dismissed this guide"
-              }
-            >
-              <Button
-                px="1"
-                size="1"
-                variant="soft"
-                color={guide.inspection.archived.status ? "red" : "green"}
-                leadingIcon={{ icon: Eye, alt: "Not archived" }}
-              />
-            </Tooltip>
-          </>
-        )}
-        <Tooltip
-          label={
-            guide.__typename === "MissingGuide"
-              ? "This guide has never been committed and published yet"
-              : !guide.active
-                ? "This guide is not active"
-                : "This guide is active"
-          }
-        >
-          <Button
-            px="1"
-            size="1"
-            variant="soft"
-            color={guide.active ? "green" : "red"}
-            leadingIcon={
-              guide.active
-                ? { icon: CheckCircle2, alt: "Active" }
-                : { icon: CircleDashed, alt: "Inactive" }
+      <Stack justify="flex-end">
+        <Stack gap="1">
+          {guide.__typename === "Guide" && (
+            <>
+              <Tooltip
+                label={
+                  guide.inspection.targetable.status
+                    ? "This user is targeted"
+                    : guide.inspection.targetable.message
+                }
+                // enabled={!guide.inspection.targetable.status}
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.inspection.targetable.status ? "green" : "red"}
+                  leadingIcon={{ icon: UserCircle2, alt: "Target" }}
+                />
+              </Tooltip>
+              <Tooltip
+                label={
+                  guide.inspection.archived.status
+                    ? "User has already archived this guide"
+                    : "User has not dismissed this guide"
+                }
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.inspection.archived.status ? "red" : "green"}
+                  leadingIcon={{ icon: Eye, alt: "Not archived" }}
+                />
+              </Tooltip>
+            </>
+          )}
+          <Tooltip
+            label={
+              guide.__typename === "MissingGuide"
+                ? "This guide has never been committed and published yet"
+                : !guide.active
+                  ? "This guide is not active"
+                  : "This guide is active"
             }
-          />
-        </Tooltip>
+          >
+            <Button
+              px="1"
+              size="1"
+              variant="soft"
+              color={guide.active ? "green" : "red"}
+              leadingIcon={
+                guide.active
+                  ? { icon: CheckCircle2, alt: "Active" }
+                  : { icon: CircleDashed, alt: "Inactive" }
+              }
+            />
+          </Tooltip>
+        </Stack>
       </Stack>
     </Row>
   );