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/client/src/clients/guide/types.ts b/packages/client/src/clients/guide/types.ts
index 0327d8270..af3bdab4d 100644
--- a/packages/client/src/clients/guide/types.ts
+++ b/packages/client/src/clients/guide/types.ts
@@ -65,10 +65,16 @@ export interface GuideGroupData {
   updated_at: string;
 }
 
+type GuideIneligibilityReason =
+  | "guide_not_active"
+  | "marked_as_archived"
+  | "target_conditions_not_met"
+  | "not_in_target_audience";
+
 export type GuideIneligibilityMarker = {
   __typename: "GuideIneligibilityMarker";
   key: KnockGuide["key"];
-  reason: string;
+  reason: GuideIneligibilityReason;
   message: string;
 };
 
diff --git a/packages/react/package.json b/packages/react/package.json
index 48c70423b..3396fe64e 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..d941891f0
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -0,0 +1,63 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { Box, Stack } from "@telegraph/layout";
+import * as React from "react";
+
+import {
+  AnnotatedGuide,
+  UnknownGuide,
+  isUnknownGuide,
+} from "./useInspectGuideClientStore";
+
+type Props = {
+  guide: AnnotatedGuide | UnknownGuide;
+};
+
+export const GuideHoverCard = ({
+  children,
+  guide,
+}: React.PropsWithChildren<Props>) => {
+  if (isUnknownGuide(guide)) {
+    return <Stack align="center">{children}</Stack>;
+  }
+
+  // Prune out internal or legacy fields.
+  const {
+    annotation: _annotation,
+    activation_location_rules: _activation_location_rules,
+    priority: _priority,
+    ...rest
+  } = guide;
+
+  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"
+            backgroundColor="surface-2"
+            style={{
+              width: "450px",
+              maxHeight: "600px",
+            }}
+          >
+            <pre
+              style={{
+                fontSize: "11px",
+              }}
+            >
+              <code>{JSON.stringify(rest, 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..bc029e2c0
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -0,0 +1,106 @@
+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 {
+  AnnotatedGuide,
+  UnknownGuide,
+  isUnknownGuide,
+} from "./useInspectGuideClientStore";
+
+const Row = ({ children }: React.PropsWithChildren) => (
+  <Stack h="7" px="2" borderTop="px" justify="space-between" align="center">
+    {children}
+  </Stack>
+);
+
+type Props = {
+  guide: UnknownGuide | AnnotatedGuide;
+  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 justify="flex-end">
+        <Stack gap="1">
+          {!isUnknownGuide(guide) && (
+            <>
+              <Tooltip
+                label={
+                  guide.annotation.targetable.status
+                    ? "This user is being targeted"
+                    : guide.annotation.targetable.message
+                }
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.annotation.targetable.status ? "green" : "red"}
+                  leadingIcon={{ icon: UserCircle2, alt: "Target" }}
+                />
+              </Tooltip>
+              <Tooltip
+                label={
+                  guide.annotation.archived.status
+                    ? "User has already dismissed this guide"
+                    : "User has not dismissed this guide"
+                }
+              >
+                <Button
+                  px="1"
+                  size="1"
+                  variant="soft"
+                  color={guide.annotation.archived.status ? "red" : "green"}
+                  leadingIcon={{ icon: Eye, alt: "Not archived" }}
+                />
+              </Tooltip>
+            </>
+          )}
+          <Tooltip
+            label={
+              isUnknownGuide(guide)
+                ? "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" }
+              }
+            />
+          </Tooltip>
+        </Stack>
+      </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..5c3941261
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx
@@ -0,0 +1,38 @@
+import { Select } from "@telegraph/select";
+
+import { TOOLBAR_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: TOOLBAR_Z_INDEX },
+      }}
+    >
+      {/* NOTE: Commented out until we can show relevant indicators for this opt
+        <Select.Option size="1" value="current-page">
+          Displayable 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 93e237963..eef46369c 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -1,7 +1,6 @@
-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";
 
@@ -9,28 +8,39 @@ import { KnockButton } from "../KnockButton";
 import { TOOLBAR_Z_INDEX } from "../shared";
 import "../styles.css";
 
+import { GuideRow } from "./GuideRow";
+import {
+  DisplayOption,
+  GuidesListDisplaySelect,
+} from "./GuidesListDisplaySelect";
 import { detectToolbarParam } from "./helpers";
+import {
+  InspectionResult,
+  useInspectGuideClientStore,
+} from "./useInspectGuideClientStore";
 
-const useInspectGuideClientStore = () => {
-  const { client } = useGuideContext();
+const GuidesList = ({
+  guides,
+  displayOption,
+}: {
+  guides: InspectionResult["guides"];
+  displayOption: DisplayOption;
+}) => {
+  return guides.map((guide, idx) => {
+    if (displayOption === "all-eligible" && !guide.annotation.isEligible) {
+      return null;
+    }
 
-  const snapshot = useStore(client.store, (state) => {
-    return {
-      debug: state.debug,
-    };
+    return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;
   });
-
-  if (!snapshot.debug?.debugging) {
-    return;
-  }
-
-  // TODO: Transform the raw client state into more useful data for debugging.
-  return {};
 };
 
 export const V2 = () => {
   const { client } = useGuideContext();
 
+  const [guidesListDisplayOption, setGuidesListDisplayOption] =
+    React.useState<DisplayOption>("all-eligible");
+
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
 
@@ -73,9 +83,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={guidesListDisplayOption}
+                onChange={(opt) => setGuidesListDisplayOption(opt)}
+              />
             </Box>
 
             <Stack gap="2">
@@ -95,6 +106,14 @@ export const V2 = () => {
               />
             </Stack>
           </Stack>
+
+          <Box w="full">
+            {result.error && <Box>{result.error}</Box>}
+            <GuidesList
+              guides={result.guides}
+              displayOption={guidesListDisplayOption}
+            />
+          </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..1857297dd
--- /dev/null
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
@@ -0,0 +1,208 @@
+import {
+  KnockGuide,
+  KnockGuideClientStoreState,
+  KnockGuideIneligibilityMarker,
+} from "@knocklabs/client";
+import { useGuideContext, useStore } from "@knocklabs/react-core";
+
+/**
+ * This is the main module that will house core logic for the toolbar. It hooks
+ * into the guide client state store, extracts relevant data for debugging, and
+ * transforms it into easily consumable data for the toolbar - namely
+ * "annotating" guides for its various statuses to display.
+ */
+
+// Active: `true` status = good
+type ActiveStatus = {
+  status: boolean;
+};
+
+// Targetable: `true` status = good
+type TargetableStatusTrue = {
+  status: true;
+};
+type TargetableStatusFalse = {
+  status: false;
+  reason: string;
+  message: string;
+};
+type TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;
+
+// Archived: `false` status = good
+type ArchivedStatus = {
+  status: boolean;
+};
+
+type AnnotatedStatuses = {
+  // Individual eligibility statuses:
+  active: ActiveStatus;
+  targetable: TargetableStatus;
+  archived: ArchivedStatus;
+};
+
+type GuideAnnotation = AnnotatedStatuses & {
+  // Resolved eligibility based on active, targetable and archived statuses,
+  // which are backend driven evaluation results that are exposed for debugging.
+  isEligible: boolean;
+};
+
+export type AnnotatedGuide = KnockGuide & {
+  annotation: GuideAnnotation;
+
+  // Legacy fields, typed only to make tsc happy when we prune these out.
+  activation_location_rules?: KnockGuide["activation_url_patterns"];
+  priority?: number;
+};
+
+// 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 UnknownGuide = {
+  __typename: "UnknownGuide";
+  key: KnockGuide["key"];
+  active: false;
+  bypass_global_group_limit: false;
+  annotation: {
+    isEligible: false;
+  };
+};
+
+export type InspectionResult = {
+  guides: (AnnotatedGuide | UnknownGuide)[];
+  error?: "no_guide_group";
+};
+
+const toIneligibilityStatus = (
+  marker: KnockGuideIneligibilityMarker,
+): Partial<AnnotatedStatuses> | undefined => {
+  switch (marker.reason) {
+    case "not_in_target_audience":
+    case "target_conditions_not_met":
+      return {
+        targetable: {
+          status: false,
+          reason: marker.reason,
+          message: marker.message,
+        },
+      };
+
+    case "marked_as_archived":
+      return {
+        archived: {
+          status: true,
+        },
+      };
+
+    case "guide_not_active":
+      return {
+        active: {
+          status: false,
+        },
+      };
+
+    default:
+      return undefined;
+  }
+};
+
+const resolveIsEligible = ({
+  active,
+  targetable,
+  archived,
+}: AnnotatedStatuses) => {
+  if (!active.status) return false;
+  if (!targetable.status) return false;
+  if (archived.status) return false;
+  return true;
+};
+
+type StoreStateSnapshot = Pick<
+  KnockGuideClientStoreState,
+  "guides" | "guideGroups" | "ineligibleGuides" | "debug"
+>;
+
+const annotateGuide = (
+  guide: KnockGuide,
+  snapshot: StoreStateSnapshot,
+): AnnotatedGuide => {
+  const { ineligibleGuides } = snapshot;
+  const marker = ineligibleGuides[guide.key];
+  const ineligiblity = marker ? toIneligibilityStatus(marker) : undefined;
+
+  const statuses: AnnotatedStatuses = {
+    active: ineligiblity?.active || { status: true },
+    targetable: ineligiblity?.targetable || { status: true },
+    archived: ineligiblity?.archived || { status: false },
+  };
+
+  const annotation: GuideAnnotation = {
+    ...statuses,
+    isEligible: resolveIsEligible(statuses),
+  };
+
+  return {
+    ...guide,
+    annotation,
+  };
+};
+
+const newUnknownGuide = (key: KnockGuide["key"]) =>
+  ({
+    __typename: "UnknownGuide",
+    key,
+    active: false,
+    bypass_global_group_limit: false,
+    annotation: {
+      isEligible: false,
+    },
+  }) as UnknownGuide;
+
+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;
+  }
+
+  // Only 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: [],
+    };
+  }
+
+  // Annotate guides for various eligibility, activation and query statuses
+  // that are useful for debugging purposes.
+  const orderedGuides = defaultGroup.display_sequence.map((guideKey) => {
+    const guide = snapshot.guides[guideKey];
+    if (!guide) {
+      return newUnknownGuide(guideKey);
+    }
+
+    return annotateGuide(guide, snapshot);
+  });
+
+  return {
+    guides: orderedGuides,
+  };
+};
+
+export const isUnknownGuide = (input: unknown): input is UnknownGuide =>
+  typeof input === "object" &&
+  input !== null &&
+  "__typename" in input &&
+  (input as UnknownGuide).__typename === "UnknownGuide";
diff --git a/packages/react/src/modules/guide/components/Toolbar/shared.ts b/packages/react/src/modules/guide/components/Toolbar/shared.ts
index 54bd1bad4..fa6931d14 100644
--- a/packages/react/src/modules/guide/components/Toolbar/shared.ts
+++ b/packages/react/src/modules/guide/components/Toolbar/shared.ts
@@ -1,3 +1,3 @@
-// 'max' z index based on max value of a signed 32-bit int
-// Ref: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index/25461690#25461690
-export const TOOLBAR_Z_INDEX = 2147483647;
+// Match the hardcoded z-index value in the telegraph tooltip package for now
+// to ensure everything within a toolbar is visible.
+export const TOOLBAR_Z_INDEX = "var(--tgph-zIndex-tooltip)";
diff --git a/packages/react/test/guide/Toolbar/V2/useInspectGuideClientStore.test.ts b/packages/react/test/guide/Toolbar/V2/useInspectGuideClientStore.test.ts
new file mode 100644
index 000000000..284032a89
--- /dev/null
+++ b/packages/react/test/guide/Toolbar/V2/useInspectGuideClientStore.test.ts
@@ -0,0 +1,346 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+
+import {
+  type AnnotatedGuide,
+  isUnknownGuide,
+  useInspectGuideClientStore,
+} from "../../../../src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore";
+
+// Mutable snapshot that tests can override to simulate different store states.
+let mockStoreState: Record<string, unknown> = {};
+
+vi.mock("@knocklabs/react-core", async () => {
+  const actual = await vi.importActual("@knocklabs/react-core");
+  return {
+    ...actual,
+    useGuideContext: () => ({
+      client: { store: {} },
+    }),
+    useStore: vi.fn((_store, selector) => selector(mockStoreState)),
+  };
+});
+
+const makeGuide = (overrides: Record<string, unknown> = {}) => ({
+  __typename: "Guide",
+  id: "guide-1",
+  key: "guide_one",
+  channel_id: "ch-1",
+  type: "banner",
+  semver: "1.0.0",
+  active: true,
+  steps: [],
+  activation_url_rules: [],
+  activation_url_patterns: [],
+  bypass_global_group_limit: false,
+  inserted_at: "2024-01-01T00:00:00Z",
+  updated_at: "2024-01-01T00:00:00Z",
+  getStep: () => undefined,
+  ...overrides,
+});
+
+const makeGuideGroup = (
+  displaySequence: string[],
+  overrides: Record<string, unknown> = {},
+) => ({
+  __typename: "GuideGroup",
+  key: "default",
+  display_sequence: displaySequence,
+  display_sequence_unthrottled: null,
+  display_sequence_throttled: null,
+  display_interval: null,
+  inserted_at: "2024-01-01T00:00:00Z",
+  updated_at: "2024-01-01T00:00:00Z",
+  ...overrides,
+});
+
+const makeMarker = (
+  key: string,
+  reason: string,
+  message = `Marker: ${reason}`,
+) => ({
+  __typename: "GuideIneligibilityMarker" as const,
+  key,
+  reason,
+  message,
+});
+
+const setSnapshot = (partial: Record<string, unknown>) => {
+  mockStoreState = {
+    guides: {},
+    guideGroups: [],
+    ineligibleGuides: {},
+    debug: { debugging: true },
+    ...partial,
+  };
+};
+
+// Shorthand for rendering the hook and extracting the result.
+const renderInspect = () => {
+  const { result } = renderHook(() => useInspectGuideClientStore());
+  return result.current;
+};
+
+describe("useInspectGuideClientStore", () => {
+  // ----- Early returns -----
+
+  test("returns undefined when not in debugging mode", () => {
+    setSnapshot({ debug: { debugging: false } });
+    expect(renderInspect()).toBeUndefined();
+  });
+
+  test("returns undefined when debug is undefined", () => {
+    setSnapshot({ debug: undefined });
+    expect(renderInspect()).toBeUndefined();
+  });
+
+  test("returns error when there are no guide groups", () => {
+    setSnapshot({ guideGroups: [] });
+    const result = renderInspect();
+    expect(result).toEqual({
+      error: "no_guide_group",
+      guides: [],
+    });
+  });
+
+  // ----- Unknown guide -----
+
+  test("produces an UnknownGuide when key is in display_sequence but not in guides", () => {
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["missing_key"])],
+      guides: {},
+    });
+
+    const result = renderInspect()!;
+    expect(result.guides).toHaveLength(1);
+    expect(isUnknownGuide(result.guides[0])).toBe(true);
+
+    const unknown = result.guides[0]!;
+    expect(unknown.key).toBe("missing_key");
+    expect(unknown.active).toBe(false);
+    expect(unknown.annotation.isEligible).toBe(false);
+  });
+
+  // ----- Guide annotation: fully eligible (no marker) -----
+
+  test("annotates an active guide with no marker as eligible", () => {
+    const guide = makeGuide({ key: "g1", active: true });
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: {},
+    });
+
+    const result = renderInspect()!;
+    expect(result.guides).toHaveLength(1);
+
+    const annotated = result.guides[0] as AnnotatedGuide;
+    expect(annotated.annotation.isEligible).toBe(true);
+    expect(annotated.annotation.active).toEqual({ status: true });
+    expect(annotated.annotation.targetable).toEqual({ status: true });
+    expect(annotated.annotation.archived).toEqual({ status: false });
+  });
+
+  // ----- Guide annotation: inactive -----
+
+  test("annotates an inactive guide as ineligible", () => {
+    const guide = makeGuide({ key: "g1", active: false });
+    const marker = makeMarker("g1", "guide_not_active", "Guide is not active");
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: { g1: marker },
+    });
+
+    const result = renderInspect()!;
+    const annotated = result.guides[0] as AnnotatedGuide;
+    expect(annotated.annotation.isEligible).toBe(false);
+    expect(annotated.annotation.active).toEqual({ status: false });
+  });
+
+  // ----- Guide annotation: target_conditions_not_met marker -----
+
+  test("annotates a guide with target_conditions_not_met as not targetable and ineligible", () => {
+    const guide = makeGuide({ key: "g1", active: true });
+    const marker = makeMarker(
+      "g1",
+      "target_conditions_not_met",
+      "User does not match conditions",
+    );
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: { g1: marker },
+    });
+
+    const result = renderInspect()!;
+    const annotated = result.guides[0] as AnnotatedGuide;
+    expect(annotated.annotation.isEligible).toBe(false);
+    expect(annotated.annotation.targetable).toEqual({
+      status: false,
+      reason: "target_conditions_not_met",
+      message: "User does not match conditions",
+    });
+    // archived should be false since the reason is not "marked_as_archived"
+    expect(annotated.annotation.archived).toEqual({ status: false });
+  });
+
+  // ----- Guide annotation: not_in_target_audience marker -----
+
+  test("annotates a guide with not_in_target_audience as not targetable and ineligible", () => {
+    const guide = makeGuide({ key: "g1", active: true });
+    const marker = makeMarker(
+      "g1",
+      "not_in_target_audience",
+      "Not in audience",
+    );
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: { g1: marker },
+    });
+
+    const result = renderInspect()!;
+    const annotated = result.guides[0] as AnnotatedGuide;
+    expect(annotated.annotation.isEligible).toBe(false);
+    expect(annotated.annotation.targetable).toEqual({
+      status: false,
+      reason: "not_in_target_audience",
+      message: "Not in audience",
+    });
+    expect(annotated.annotation.archived).toEqual({ status: false });
+  });
+
+  // ----- Guide annotation: marked_as_archived marker -----
+
+  test("annotates a guide with marked_as_archived as archived and ineligible", () => {
+    const guide = makeGuide({ key: "g1", active: true });
+    const marker = makeMarker("g1", "marked_as_archived", "Already dismissed");
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: { g1: marker },
+    });
+
+    const result = renderInspect()!;
+    const annotated = result.guides[0] as AnnotatedGuide;
+    expect(annotated.annotation.isEligible).toBe(false);
+    // archived reason falls through the targetable switch default, so targetable stays true
+    expect(annotated.annotation.targetable).toEqual({ status: true });
+    expect(annotated.annotation.archived).toEqual({ status: true });
+  });
+
+  // ----- Guide annotation: unrecognized marker reason -----
+
+  test("treats an unrecognized marker reason as still targetable and not archived", () => {
+    const guide = makeGuide({ key: "g1", active: true });
+    const marker = makeMarker(
+      "g1",
+      "some_unknown_reason",
+      "Something happened",
+    );
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["g1"])],
+      guides: { g1: guide },
+      ineligibleGuides: { g1: marker },
+    });
+
+    const result = renderInspect()!;
+    const annotated = result.guides[0] as AnnotatedGuide;
+    // Unknown reasons don't affect targetable or archived, so the guide is still eligible
+    expect(annotated.annotation.isEligible).toBe(true);
+    expect(annotated.annotation.active).toEqual({ status: true });
+    expect(annotated.annotation.targetable).toEqual({ status: true });
+    expect(annotated.annotation.archived).toEqual({ status: false });
+  });
+
+  // ----- Ordering follows display_sequence -----
+
+  test("returns guides ordered by display_sequence", () => {
+    const guideA = makeGuide({ key: "a" });
+    const guideB = makeGuide({ key: "b" });
+    const guideC = makeGuide({ key: "c" });
+    setSnapshot({
+      guideGroups: [makeGuideGroup(["c", "a", "b"])],
+      guides: { a: guideA, b: guideB, c: guideC },
+      ineligibleGuides: {},
+    });
+
+    const result = renderInspect()!;
+    expect(result.guides.map((g) => g.key)).toEqual(["c", "a", "b"]);
+  });
+
+  // ----- Mixed guides: eligible, ineligible, and unknown -----
+
+  test("handles a mix of eligible, ineligible, and unknown guides", () => {
+    const eligible = makeGuide({ key: "eligible", active: true });
+    const inactive = makeGuide({ key: "inactive", active: false });
+    const archived = makeGuide({ key: "archived", active: true });
+    const inactiveMarker = makeMarker(
+      "inactive",
+      "guide_not_active",
+      "Guide is not active",
+    );
+    const archivedMarker = makeMarker(
+      "archived",
+      "marked_as_archived",
+      "Dismissed",
+    );
+
+    setSnapshot({
+      guideGroups: [
+        makeGuideGroup(["eligible", "inactive", "archived", "unknown_key"]),
+      ],
+      guides: {
+        eligible,
+        inactive,
+        archived,
+      },
+      ineligibleGuides: {
+        inactive: inactiveMarker,
+        archived: archivedMarker,
+      },
+    });
+
+    const result = renderInspect()!;
+    expect(result.guides).toHaveLength(4);
+
+    // eligible guide
+    const g0 = result.guides[0] as AnnotatedGuide;
+    expect(g0.key).toBe("eligible");
+    expect(g0.annotation.isEligible).toBe(true);
+
+    // inactive guide
+    const g1 = result.guides[1] as AnnotatedGuide;
+    expect(g1.key).toBe("inactive");
+    expect(g1.annotation.isEligible).toBe(false);
+    expect(g1.annotation.active.status).toBe(false);
+
+    // archived guide
+    const g2 = result.guides[2] as AnnotatedGuide;
+    expect(g2.key).toBe("archived");
+    expect(g2.annotation.isEligible).toBe(false);
+    expect(g2.annotation.archived.status).toBe(true);
+
+    // unknown guide
+    const g3 = result.guides[3]!;
+    expect(g3.key).toBe("unknown_key");
+    expect(isUnknownGuide(g3)).toBe(true);
+    expect(g3.annotation.isEligible).toBe(false);
+  });
+
+  describe("resolveIsEligible", () => {
+    test("active + targetable + not archived = eligible", () => {
+      const guide = makeGuide({ key: "g1", active: true });
+      setSnapshot({
+        guideGroups: [makeGuideGroup(["g1"])],
+        guides: { g1: guide },
+        ineligibleGuides: {},
+      });
+
+      const result = renderInspect()!;
+      const annotated = result.guides[0] as AnnotatedGuide;
+      expect(annotated.annotation.isEligible).toBe(true);
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 9f6d02438..d69b6dca2 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"
@@ -16463,6 +16592,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"