From 722fa2094afa8b6e16ff4d45ecb49fefa3a98182 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 16:52:04 -0500
Subject: [PATCH 1/9] support focusedGuideKeys in favor of forcedGuideKey

---
 packages/client/src/clients/guide/client.ts | 15 +++++++++++++--
 packages/client/src/clients/guide/types.ts  |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/clients/guide/client.ts b/packages/client/src/clients/guide/client.ts
index 25aad07cf..72129b9ef 100644
--- a/packages/client/src/clients/guide/client.ts
+++ b/packages/client/src/clients/guide/client.ts
@@ -214,6 +214,9 @@ const predicate = (
   if (debug.forcedGuideKey) {
     return debug.forcedGuideKey === guide.key;
   }
+  if (debug.focusedGuideKeys) {
+    return !!debug.focusedGuideKeys[guide.key]
+  }
 
   const ineligible = ineligibleGuides[guide.key];
   if (ineligible) {
@@ -563,7 +566,11 @@ export class KnockGuideClient {
     // Clear debug state from store
     this.store.setState((state) => ({
       ...state,
-      debug: { forcedGuideKey: null, previewSessionId: null },
+      debug: {
+        forcedGuideKey: null,
+        previewSessionId: null,
+        focusedGuideKeys: {},
+      },
       previewGuides: {}, // Clear preview guides when exiting debug mode
     }));
 
@@ -591,6 +598,7 @@ export class KnockGuideClient {
       debug: {
         skipEngagementTracking: true,
         ignoreDisplayInterval: true,
+        focusedGuideKeys: {},
         ...debugOpts,
         debugging: true,
       },
@@ -1082,7 +1090,10 @@ export class KnockGuideClient {
       // Get the next unarchived step.
       getStep() {
         // If debugging this guide, return the first step regardless of archive status
-        if (self.store.state.debug?.forcedGuideKey === this.key) {
+        if (
+          self.store.state.debug?.forcedGuideKey === this.key ||
+          self.store.state.debug?.focusedGuideKeys?.[this.key]
+        ) {
           return this.steps[0];
         }
 
diff --git a/packages/client/src/clients/guide/types.ts b/packages/client/src/clients/guide/types.ts
index 9e09efb93..d57ae5276 100644
--- a/packages/client/src/clients/guide/types.ts
+++ b/packages/client/src/clients/guide/types.ts
@@ -232,6 +232,7 @@ export type QueryStatus = {
 export type DebugState = {
   debugging?: boolean;
   forcedGuideKey?: string | null;
+  focusedGuideKeys?: Record<KnockGuide["key"], true>;
   previewSessionId?: string | null;
   skipEngagementTracking?: boolean;
   ignoreDisplayInterval?: boolean;

From e1ae670a6a75e11f030588e3c14f2544d9469ca7 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 17:01:37 -0500
Subject: [PATCH 2/9] add tests

---
 .../client/test/clients/guide/guide.test.ts   | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/packages/client/test/clients/guide/guide.test.ts b/packages/client/test/clients/guide/guide.test.ts
index 4bae5b050..a0e7d1e9e 100644
--- a/packages/client/test/clients/guide/guide.test.ts
+++ b/packages/client/test/clients/guide/guide.test.ts
@@ -2260,6 +2260,93 @@ describe("KnockGuideClient", () => {
       expect(result).toBeUndefined();
     });
 
+    test("returns an archived guide when focusedGuideKeys includes it", () => {
+      const archivedGuide = {
+        ...mockGuideThree,
+        steps: [
+          {
+            ...mockStep,
+            message: {
+              ...mockStep.message,
+              archived_at: new Date().toISOString(),
+            },
+          },
+        ],
+      };
+
+      const stateWithArchivedGuide = {
+        guideGroups: [mockDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: {
+          ...mockGuides,
+          [mockGuideThree.key]: archivedGuide,
+        },
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { [mockGuideThree.key]: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+      const result = client["_selectGuide"](stateWithArchivedGuide, {
+        key: mockGuideThree.key,
+      });
+
+      // Should return the focused guide even though it's archived
+      expect(result!.key).toBe("system_status");
+      expect(result!.steps[0]!.message.archived_at).toBeTruthy();
+    });
+
+    test("returns only focused guides when focusedGuideKeys is set", () => {
+      const stateWithGuides = {
+        guideGroups: [mockDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: mockGuides,
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { [mockGuideTwo.key]: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+      const result = client["_selectGuide"](stateWithGuides);
+
+      // Should return the focused guide
+      expect(result!.key).toBe("feature_tour");
+    });
+
+    test("doesn't return a guide not in focusedGuideKeys", () => {
+      const stateWithGuides = {
+        guideGroups: [mockDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: mockGuides,
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { [mockGuideTwo.key]: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+      const result = client["_selectGuide"](stateWithGuides, {
+        key: mockGuideOne.key,
+      });
+
+      // Guide one is not in focusedGuideKeys, so should not be returned
+      expect(result).toBeUndefined();
+    });
+
     test("does not return a guide inside a throttle window ", () => {
       const stateWithGuides = {
         guideGroups: [

From 98d7f24d8cbf0b74dfe8f06ba2341a5184a3a5b4 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 18:10:16 -0500
Subject: [PATCH 3/9] add pin button to control focusedGuideKeys from the
 toolbar

---
 .../guide/components/Toolbar/V2/GuideRow.tsx  | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 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 37bc18d56..fb2152e5d 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -1,3 +1,4 @@
+import { useGuideContext, useStore } from "@knocklabs/react-core";
 import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
 import { Tag } from "@telegraph/tag";
@@ -9,6 +10,7 @@ import {
   Code2,
   Eye,
   LocateFixed,
+  Pin,
   UserCircle2,
 } from "lucide-react";
 import * as React from "react";
@@ -32,6 +34,15 @@ type Props = {
 };
 
 export const GuideRow = ({ guide, orderIndex }: Props) => {
+  const { client } = useGuideContext();
+  const { debugSettings } = useStore(client.store, (state) => ({
+    debugSettings: state.debug,
+  }));
+
+  const focusedGuideKeys = debugSettings?.focusedGuideKeys || {};
+  const hasFocus = Object.keys(focusedGuideKeys).length > 0;
+  const isFocused = !!focusedGuideKeys[guide.key];
+
   return (
     <Row>
       <GuideHoverCard guide={guide}>
@@ -43,7 +54,11 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
           >
             {orderIndex + 1}
           </Tag>
-          <Text as="code" size="1">
+          <Text
+            as="code"
+            size="1"
+            color={!hasFocus ? "default" : isFocused ? "blue" : "disabled"}
+          >
             {guide.key}
           </Text>
         </Stack>
@@ -52,6 +67,34 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
       <Stack justify="flex-end">
         {!isUnknownGuide(guide) && (
           <>
+            {guide.annotation.selectable.status !== undefined &&
+              (!hasFocus || isFocused) && (
+                <>
+                  <Tooltip
+                    label={
+                      isFocused ? "Unfocus this guide" : "Focus on this guide"
+                    }
+                  >
+                    <Button
+                      size="1"
+                      variant="ghost"
+                      color={isFocused ? "blue" : "gray"}
+                      leadingIcon={{ icon: Pin, alt: "Focus" }}
+                      onClick={() =>
+                        client.setDebug({
+                          ...debugSettings,
+                          focusedGuideKeys: isFocused
+                            ? {}
+                            : { [guide.key]: true },
+                        })
+                      }
+                    />
+                  </Tooltip>
+                  <Stack px="2" align="center">
+                    <Box h="3" borderLeft="px" borderColor="gray-6" />
+                  </Stack>
+                </>
+              )}
             <Stack gap="1">
               <Tooltip
                 label={

From 053551e76357b92eb68ea58ff29716a5db484347 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 18:13:01 -0500
Subject: [PATCH 4/9] respect focusedGuideKeys in selectGuide while in debug
 mode

---
 packages/client/src/clients/guide/client.ts | 25 +++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/clients/guide/client.ts b/packages/client/src/clients/guide/client.ts
index 72129b9ef..9e28bc457 100644
--- a/packages/client/src/clients/guide/client.ts
+++ b/packages/client/src/clients/guide/client.ts
@@ -214,8 +214,11 @@ const predicate = (
   if (debug.forcedGuideKey) {
     return debug.forcedGuideKey === guide.key;
   }
-  if (debug.focusedGuideKeys) {
-    return !!debug.focusedGuideKeys[guide.key]
+  if (
+    debug.focusedGuideKeys &&
+    Object.keys(debug.focusedGuideKeys).length > 0
+  ) {
+    return !!debug.focusedGuideKeys[guide.key];
   }
 
   const ineligible = ineligibleGuides[guide.key];
@@ -762,6 +765,10 @@ export class KnockGuideClient {
       return guide;
     }
 
+    // If focused while in debug mode, then we want to ignore the guide order
+    // and throttle settings and force render this guide.
+    const focusedInDebug = state.debug?.focusedGuideKeys?.[guide.key];
+
     const throttled = !opts.includeThrottled && checkStateIfThrottled(state);
 
     switch (this.stage.status) {
@@ -778,6 +785,13 @@ export class KnockGuideClient {
         // we can re-resolve when the group stage closes.
         this.stage.ordered[index] = guide.key;
 
+        if (focusedInDebug) {
+          this.knock.log(
+            `[Guide] Focused to return \`${guide.key}\` (stage: ${formatGroupStage(this.stage)})`,
+          );
+          return guide;
+        }
+
         if (throttled) {
           this.knock.log(`[Guide] Throttling the selected guide: ${guide.key}`);
           return undefined;
@@ -791,6 +805,13 @@ export class KnockGuideClient {
       }
 
       case "closed": {
+        if (focusedInDebug) {
+          this.knock.log(
+            `[Guide] Focused to return \`${guide.key}\` (stage: ${formatGroupStage(this.stage)})`,
+          );
+          return guide;
+        }
+
         if (throttled) {
           this.knock.log(`[Guide] Throttling the selected guide: ${guide.key}`);
           return undefined;

From a9ce8f8050b2f1399d1e41cf63745930cf3fdeb1 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 18:20:21 -0500
Subject: [PATCH 5/9] add tests

---
 .../client/test/clients/guide/guide.test.ts   | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)

diff --git a/packages/client/test/clients/guide/guide.test.ts b/packages/client/test/clients/guide/guide.test.ts
index a0e7d1e9e..8aa2ac166 100644
--- a/packages/client/test/clients/guide/guide.test.ts
+++ b/packages/client/test/clients/guide/guide.test.ts
@@ -2347,6 +2347,29 @@ describe("KnockGuideClient", () => {
       expect(result).toBeUndefined();
     });
 
+    test("falls through to normal filtering when focusedGuideKeys is empty object", () => {
+      const stateWithGuides = {
+        guideGroups: [mockDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: mockGuides,
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: {},
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+      const result = client["_selectGuide"](stateWithGuides);
+
+      // Empty focusedGuideKeys should not filter — normal selection applies
+      expect(result).toBeDefined();
+      expect(result!.key).toBe("feature_tour");
+    });
+
     test("does not return a guide inside a throttle window ", () => {
       const stateWithGuides = {
         guideGroups: [
@@ -4304,6 +4327,152 @@ describe("KnockGuideClient", () => {
       expect(result).toBeDefined();
       expect(result!.key).toBe("onboarding");
     });
+
+    test("returns focused guide in closed stage even when throttled", () => {
+      const stateWithGuides = {
+        guideGroups: [throttleDefaultGroup],
+        guideGroupDisplayLogs: {
+          default: new Date().toISOString(),
+        },
+        guides: { onboarding: mockGuide },
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { onboarding: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+
+      // Set up a closed stage with the guide resolved
+      client["stage"] = {
+        status: "closed",
+        ordered: ["onboarding"],
+        resolved: "onboarding",
+        results: {},
+        timeoutId: null,
+      };
+
+      // Focused guides bypass throttle in closed stage
+      const result = client.selectGuide(stateWithGuides, {
+        key: "onboarding",
+      });
+      expect(result).toBeDefined();
+      expect(result!.key).toBe("onboarding");
+    });
+
+    test("returns focused guide in patch stage even when throttled", () => {
+      const stateWithGuides = {
+        guideGroups: [throttleDefaultGroup],
+        guideGroupDisplayLogs: {
+          default: new Date().toISOString(),
+        },
+        guides: { onboarding: mockGuide },
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { onboarding: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+
+      // Set up a closed stage then patch it
+      client["stage"] = {
+        status: "closed",
+        ordered: ["onboarding"],
+        resolved: "onboarding",
+        results: {},
+        timeoutId: null,
+      };
+      client["patchClosedGroupStage"]();
+
+      expect(client.getStage()!.status).toBe("patch");
+
+      // Focused guides bypass throttle in patch stage
+      const result = client.selectGuide(stateWithGuides, {
+        key: "onboarding",
+      });
+      expect(result).toBeDefined();
+      expect(result!.key).toBe("onboarding");
+    });
+
+    test("returns focused guide in patch stage even when not the resolved guide", () => {
+      const stateWithGuides = {
+        guideGroups: [throttleDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: { onboarding: mockGuide },
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { onboarding: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+
+      // Set up a closed stage where a DIFFERENT guide was resolved
+      client["stage"] = {
+        status: "closed",
+        ordered: ["onboarding"],
+        resolved: "some_other_guide",
+        results: {},
+        timeoutId: null,
+      };
+      client["patchClosedGroupStage"]();
+
+      expect(client.getStage()!.status).toBe("patch");
+
+      // Focused guides bypass the resolved check in patch stage
+      const result = client.selectGuide(stateWithGuides, {
+        key: "onboarding",
+      });
+      expect(result).toBeDefined();
+      expect(result!.key).toBe("onboarding");
+    });
+
+    test("returns focused guide in closed stage even when not the resolved guide", () => {
+      const stateWithGuides = {
+        guideGroups: [throttleDefaultGroup],
+        guideGroupDisplayLogs: {},
+        guides: { onboarding: mockGuide },
+        ineligibleGuides: {},
+        previewGuides: {},
+        queries: {},
+        location: undefined,
+        counter: 0,
+        debug: {
+          focusedGuideKeys: { onboarding: true as const },
+        },
+      };
+
+      const client = new KnockGuideClient(mockKnock, channelId);
+
+      // Set up a closed stage where a DIFFERENT guide was resolved
+      client["stage"] = {
+        status: "closed",
+        ordered: ["onboarding"],
+        resolved: "some_other_guide",
+        results: {},
+        timeoutId: null,
+      };
+
+      // Focused guides bypass the resolved check in closed stage
+      const result = client.selectGuide(stateWithGuides, {
+        key: "onboarding",
+      });
+      expect(result).toBeDefined();
+      expect(result!.key).toBe("onboarding");
+    });
   });
 
   describe("setDebug", () => {

From 6ede0499c897a2cb46063cf586eedeb4be0c6d57 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 18:43:06 -0500
Subject: [PATCH 6/9] add placeholder buttons

---
 .../components/Toolbar/V2/GuideHoverCard.tsx  | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

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 e305dec54..aa17d9fed 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -1,5 +1,7 @@
 import * as HoverCard from "@radix-ui/react-hover-card";
+import { Button } from "@telegraph/button";
 import { Box, Stack } from "@telegraph/layout";
+import { ExternalLink, RotateCcw } from "lucide-react";
 import * as React from "react";
 
 import {
@@ -47,6 +49,26 @@ export const GuideHoverCard = ({
               maxHeight: "600px",
             }}
           >
+            <Stack justify="flex-end" gap="1" pt="2">
+              <Button
+                size="0"
+                variant="soft"
+                color="default"
+                leadingIcon={{ icon: RotateCcw, alt: "Reset engagement" }}
+                onClick={() => {}}
+              >
+                Reset engagement
+              </Button>
+              <Button
+                size="0"
+                variant="soft"
+                color="default"
+                leadingIcon={{ icon: ExternalLink, alt: "Go to dashboard" }}
+                onClick={() => {}}
+              >
+                Go to dashboard
+              </Button>
+            </Stack>
             <pre
               style={{
                 fontSize: "11px",

From 8e198f54e96b406fc61943e65d249fad49de8e7d Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Wed, 25 Feb 2026 23:58:12 -0500
Subject: [PATCH 7/9] priortitize focused guide keys ahead of forced guide key

---
 packages/client/src/clients/guide/client.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/clients/guide/client.ts b/packages/client/src/clients/guide/client.ts
index 9e28bc457..dfe155fc8 100644
--- a/packages/client/src/clients/guide/client.ts
+++ b/packages/client/src/clients/guide/client.ts
@@ -211,15 +211,15 @@ const predicate = (
   // If in debug mode with a forced guide key, bypass other filtering and always
   // return true for that guide only. This should always run AFTER checking the
   // filters but BEFORE checking archived status and location rules.
-  if (debug.forcedGuideKey) {
-    return debug.forcedGuideKey === guide.key;
-  }
   if (
     debug.focusedGuideKeys &&
     Object.keys(debug.focusedGuideKeys).length > 0
   ) {
     return !!debug.focusedGuideKeys[guide.key];
   }
+  if (debug.forcedGuideKey) {
+    return debug.forcedGuideKey === guide.key;
+  }
 
   const ineligible = ineligibleGuides[guide.key];
   if (ineligible) {

From 728cb65bdf1336b77c9f998b26ce6b72ca56d6fd Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 26 Feb 2026 15:39:09 -0500
Subject: [PATCH 8/9] more style touch up

---
 .../guide/components/Toolbar/V2/GuideContextDetails.tsx  | 5 +----
 .../src/modules/guide/components/Toolbar/V2/GuideRow.tsx | 4 ++--
 .../react/src/modules/guide/components/Toolbar/V2/V2.tsx | 9 ++++++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

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 21a0f728f..8c916b8c9 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
@@ -14,10 +14,7 @@ export const GuideContextDetails = () => {
   const { defaultGroup, debugSettings } = useStore(client.store, (state) => {
     return {
       defaultGroup: state.guideGroups[0],
-      debugSettings: {
-        skipEngagementTracking: !!state.debug?.skipEngagementTracking,
-        ignoreDisplayInterval: !!state.debug?.ignoreDisplayInterval,
-      },
+      debugSettings: state.debug || {},
     };
   });
   const displayInterval = defaultGroup?.display_interval ?? null;
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 fb2152e5d..2c8f2f721 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx
@@ -36,10 +36,10 @@ type Props = {
 export const GuideRow = ({ guide, orderIndex }: Props) => {
   const { client } = useGuideContext();
   const { debugSettings } = useStore(client.store, (state) => ({
-    debugSettings: state.debug,
+    debugSettings: state.debug || {},
   }));
 
-  const focusedGuideKeys = debugSettings?.focusedGuideKeys || {};
+  const focusedGuideKeys = debugSettings.focusedGuideKeys || {};
   const hasFocus = Object.keys(focusedGuideKeys).length > 0;
   const isFocused = !!focusedGuideKeys[guide.key];
 
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 59a2aa397..b724a8d6c 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -1,6 +1,7 @@
 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";
 
@@ -119,8 +120,14 @@ export const V2 = () => {
           </Stack>
 
           <Box w="full">
-            {result.error && <Box>{result.error}</Box>}
             <GuideContextDetails />
+            {result.error && (
+              <Box px="2" pb="1">
+                <Text as="span" size="0" weight="medium" color="red">
+                  {result.error}
+                </Text>
+              </Box>
+            )}
             <GuidesList
               guides={result.guides}
               displayOption={guidesListDisplayOption}

From 88597c78fc550173ff521fd18c287eddefd50d34 Mon Sep 17 00:00:00 2001
From: Thomas <thomas.whyyou@gmail.com>
Date: Thu, 26 Feb 2026 16:42:57 -0500
Subject: [PATCH 9/9] add todo comments

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

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 aa17d9fed..873e57488 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx
@@ -55,6 +55,7 @@ export const GuideHoverCard = ({
                 variant="soft"
                 color="default"
                 leadingIcon={{ icon: RotateCcw, alt: "Reset engagement" }}
+                // TODO(KNO-11468): Placeholder button
                 onClick={() => {}}
               >
                 Reset engagement
@@ -64,6 +65,7 @@ export const GuideHoverCard = ({
                 variant="soft"
                 color="default"
                 leadingIcon={{ icon: ExternalLink, alt: "Go to dashboard" }}
+                // TODO(KNO-11819): Placeholder button
                 onClick={() => {}}
               >
                 Go to dashboard