@copilotkit/react-core 1.57.0 → 1.57.1-canary.1778272612

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-core",
-  "version": "1.57.0",
+  "version": "1.57.1-canary.1778272612",
   "private": false,
   "keywords": [
     "ai",
@@ -46,6 +46,14 @@
       "require": "./dist/v2/index.cjs"
     },
     "./package.json": "./package.json",
+    "./v2/context": {
+      "import": "./dist/v2/context.mjs",
+      "require": "./dist/v2/context.cjs"
+    },
+    "./v2/headless": {
+      "import": "./dist/v2/headless.mjs",
+      "require": "./dist/v2/headless.cjs"
+    },
     "./v2/styles.css": "./dist/v2/index.css"
   },
   "publishConfig": {
@@ -73,11 +81,11 @@
     "untruncate-json": "^0.0.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/core": "1.57.0",
-    "@copilotkit/shared": "1.57.0",
-    "@copilotkit/a2ui-renderer": "1.57.0",
-    "@copilotkit/runtime-client-gql": "1.57.0",
-    "@copilotkit/web-inspector": "1.57.0"
+    "@copilotkit/a2ui-renderer": "1.57.1-canary.1778272612",
+    "@copilotkit/runtime-client-gql": "1.57.1-canary.1778272612",
+    "@copilotkit/core": "1.57.1-canary.1778272612",
+    "@copilotkit/shared": "1.57.1-canary.1778272612",
+    "@copilotkit/web-inspector": "1.57.1-canary.1778272612"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

package/src/hooks/__tests__/use-copilot-chat-internal-connect.test.tsx

@@ -179,10 +179,9 @@ describe("useCopilotChatInternal – connectAgent guard", () => {
   });
 
   it("does not call connectAgent when threadId matches (same agent instance, no re-render)", async () => {
-    // useAgent now returns a per-thread clone, so the wrapper guards via
-    // lastConnectedAgentRef: connect fires once per agent instance, not once
-    // per render. After the first connect, further re-renders with the same
-    // agent do not trigger another connect.
+    // The wrapper guards via lastConnectedAgentRef: connect fires once per
+    // agent instance, not once per render. After the first connect, further
+    // re-renders with the same agent do not trigger another connect.
     mockRuntimeConnectionStatus =
       CopilotKitCoreRuntimeConnectionStatus.Connected;
     mockAgent.threadId = "config-thread-id";
@@ -230,13 +229,13 @@ describe("useCopilotChatInternal – connectAgent guard", () => {
     });
   });
 
-  it("passes config threadId to useAgent", () => {
+  it("passes resolved agentId to useAgent", () => {
     applyMocks();
 
     renderHook(() => useCopilotChatInternal(), { wrapper: createWrapper() });
 
     expect(vi.mocked(useAgent)).toHaveBeenCalledWith(
-      expect.objectContaining({ threadId: "config-thread-id" }),
+      expect.objectContaining({ agentId: "test-agent" }),
     );
   });
 });

package/src/hooks/use-copilot-chat_internal.ts

@@ -339,7 +339,6 @@ export function useCopilotChatInternal({
   const resolvedAgentId = existingConfig?.agentId ?? "default";
   const { agent } = useAgent({
     agentId: resolvedAgentId,
-    threadId: existingConfig?.threadId,
   });
 
   // Track the last agent instance we called connect() on. Without this,

package/src/v2/components/chat/CopilotChat.tsx

@@ -118,7 +118,6 @@ export function CopilotChat({
 
   const { agent } = useAgent({
     agentId: resolvedAgentId,
-    threadId: resolvedThreadId,
     throttleMs,
   });
   const { copilotkit } = useCopilotKit();
@@ -235,6 +234,8 @@ export function CopilotChat({
       agent.abortController = connectAbortController;
     }
 
+    agent.threadId = resolvedThreadId;
+
     const connect = async (agent: AbstractAgent) => {
       try {
         await copilotkit.connectAgent({ agent });

package/src/v2/components/chat/CopilotChatMessageView.tsx

@@ -8,11 +8,12 @@ import React, {
 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ScrollElementContext } from "./scroll-element-context";
-import { WithSlots, renderSlot, isReactComponentType } from "../../lib/slots";
+import type { WithSlots } from "../../lib/slots";
+import { renderSlot, isReactComponentType } from "../../lib/slots";
 import CopilotChatAssistantMessage from "./CopilotChatAssistantMessage";
 import CopilotChatUserMessage from "./CopilotChatUserMessage";
 import CopilotChatReasoningMessage from "./CopilotChatReasoningMessage";
-import {
+import type {
   ActivityMessage,
   AssistantMessage,
   Message,
@@ -22,9 +23,10 @@ import {
 } from "@ag-ui/core";
 import { twMerge } from "tailwind-merge";
 import { useRenderActivityMessage, useRenderCustomMessages } from "../../hooks";
-import { getThreadClone } from "../../hooks/use-agent";
 import { useCopilotKit } from "../../providers/CopilotKitProvider";
 import { useCopilotChatConfiguration } from "../../providers/CopilotChatConfigurationProvider";
+import { IntelligenceIndicator } from "../intelligence-indicator";
+import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 
 /**
  * Resolves a slot value into a { Component, slotProps } pair, handling the three
@@ -392,18 +394,14 @@ export function CopilotChatMessageView({
   // Subscribe to state changes so custom message renderers re-render when state updates.
   useEffect(() => {
     if (!config?.agentId) return;
-    const registryAgent = copilotkit.getAgent(config.agentId);
-    // Prefer the per-thread clone so that state changes from the running agent
-    // (which is the clone, not the registry) trigger re-renders.
-    const agent =
-      getThreadClone(registryAgent, config.threadId) ?? registryAgent;
+    const agent = copilotkit.getAgent(config.agentId);
     if (!agent) return;
 
     const subscription = agent.subscribe({
       onStateChanged: forceUpdate,
     });
     return () => subscription.unsubscribe();
-  }, [config?.agentId, config?.threadId, copilotkit, forceUpdate]);
+  }, [config?.agentId, copilotkit, forceUpdate]);
 
   // Subscribe to interrupt element changes for in-chat rendering.
   const [interruptElement, setInterruptElement] =
@@ -608,6 +606,23 @@ export function CopilotChatMessageView({
       );
     }
 
+    // Auto-mount the IntelligenceIndicator on assistant message slots
+    // when the runtime is in intelligence mode. The component self-gates
+    // further (latest matching-assistant slot, pending tool-call grace
+    // window) so only one pill renders at a time — mounting only for
+    // assistant messages avoids the per-slot `useAgent` subscription
+    // and four effects on user/reasoning/activity slots that would just
+    // return null at the role gate anyway.
+    if (copilotkit.intelligence !== undefined && message.role === "assistant") {
+      elements.push(
+        <IntelligenceIndicator
+          key={`${message.id}-intelligence`}
+          message={message}
+          agentId={config?.agentId ?? DEFAULT_AGENT_ID}
+        />,
+      );
+    }
+
     return elements.filter(Boolean) as React.ReactElement[];
   };
 

package/src/v2/components/chat/CopilotChatView.tsx

@@ -89,8 +89,8 @@ export type CopilotChatViewProps = WithSlots<
     /**
      * When `true`, suppresses the welcome screen while a thread's initial
      * connect is in flight. Prevents the "How can I help you today?" flash
-     * that would otherwise appear between mounting an empty cloned agent and
-     * the bootstrap messages arriving from /connect.
+     * that would otherwise appear between mounting an empty agent instance
+     * and the bootstrap messages arriving from /connect.
      */
     isConnecting?: boolean;
     /**

package/src/v2/components/chat/CopilotSidebar.tsx

@@ -14,6 +14,7 @@ export type CopilotSidebarProps = Omit<CopilotChatProps, "chatView"> & {
   toggleButton?: CopilotSidebarViewProps["toggleButton"];
   defaultOpen?: boolean;
   width?: number | string;
+  position?: CopilotSidebarViewProps["position"];
 };
 
 export function CopilotSidebar({
@@ -21,6 +22,7 @@ export function CopilotSidebar({
   toggleButton,
   defaultOpen,
   width,
+  position,
   ...chatProps
 }: CopilotSidebarProps) {
   const { checkFeature } = useLicenseContext();
@@ -41,6 +43,7 @@ export function CopilotSidebar({
         toggleButton: viewToggleButton,
         width: viewWidth,
         defaultOpen: viewDefaultOpen,
+        position: viewPosition,
         ...restProps
       } = viewProps as CopilotSidebarViewProps;
 
@@ -51,12 +54,13 @@ export function CopilotSidebar({
           toggleButton={toggleButton ?? viewToggleButton}
           width={width ?? viewWidth}
           defaultOpen={defaultOpen ?? viewDefaultOpen}
+          position={position ?? viewPosition}
         />
       );
     };
 
     return Object.assign(Component, CopilotChatView);
-  }, [header, toggleButton, width, defaultOpen]);
+  }, [header, toggleButton, width, defaultOpen, position]);
 
   return (
     <>

package/src/v2/components/chat/CopilotSidebarView.tsx

@@ -21,6 +21,7 @@ export type CopilotSidebarViewProps = CopilotChatViewProps & {
   toggleButton?: SlotValue<typeof CopilotChatToggleButton>;
   width?: number | string;
   defaultOpen?: boolean;
+  position?: "left" | "right";
 };
 
 export function CopilotSidebarView({
@@ -28,6 +29,7 @@ export function CopilotSidebarView({
   toggleButton,
   width,
   defaultOpen = true,
+  position = "right",
   ...props
 }: CopilotSidebarViewProps) {
   return (
@@ -36,6 +38,7 @@ export function CopilotSidebarView({
         header={header}
         toggleButton={toggleButton}
         width={width}
+        position={position}
         {...props}
       />
     </CopilotChatConfigurationProvider>
@@ -46,6 +49,7 @@ function CopilotSidebarViewInternal({
   header,
   toggleButton,
   width,
+  position = "right",
   ...props
 }: Omit<CopilotSidebarViewProps, "defaultOpen">) {
   const configuration = useCopilotChatConfiguration();
@@ -118,29 +122,34 @@ function CopilotSidebarViewInternal({
       return;
     if (!window.matchMedia("(min-width: 768px)").matches) return;
 
+    const marginStyleProp =
+      position === "left" ? "marginInlineStart" : "marginInlineEnd";
+    const transitionCssProp =
+      position === "left" ? "margin-inline-start" : "margin-inline-end";
+
     if (isSidebarOpen) {
       if (hasMounted.current) {
-        document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
+        document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
       }
-      document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
+      document.body.style[marginStyleProp] = widthToMargin(sidebarWidth);
     } else if (hasMounted.current) {
-      document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
-      document.body.style.marginInlineEnd = "";
+      document.body.style.transition = `${transitionCssProp} ${SIDEBAR_TRANSITION_MS}ms ease`;
+      document.body.style[marginStyleProp] = "";
     }
 
     hasMounted.current = true;
 
     return () => {
-      document.body.style.marginInlineEnd = "";
+      document.body.style[marginStyleProp] = "";
       document.body.style.transition = "";
     };
-  }, [isSidebarOpen, sidebarWidth]);
+  }, [isSidebarOpen, sidebarWidth, position]);
 
   const headerElement = renderSlot(header, CopilotModalHeader, {});
   const toggleButtonElement = renderSlot(
     toggleButton,
     CopilotChatToggleButton,
-    {},
+    position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {},
   );
 
   return (
@@ -151,18 +160,23 @@ function CopilotSidebarViewInternal({
         data-copilotkit
         data-testid="copilot-sidebar"
         data-copilot-sidebar
+        data-position={position}
         className={cn(
           "copilotKitSidebar copilotKitWindow",
-          "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex",
+          "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex",
+          position === "left" ? "cpk:left-0" : "cpk:right-0",
           // Height with dvh fallback and safe area support
           "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen",
           // Responsive width: full on mobile, custom on desktop
           "cpk:w-full",
-          "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
+          position === "left" ? "cpk:border-r" : "cpk:border-l",
+          "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl",
           "cpk:transition-transform cpk:duration-300 cpk:ease-out",
           isSidebarOpen
             ? "cpk:translate-x-0"
-            : "cpk:translate-x-full cpk:pointer-events-none",
+            : position === "left"
+              ? "cpk:-translate-x-full cpk:pointer-events-none"
+              : "cpk:translate-x-full cpk:pointer-events-none",
         )}
         style={
           {

package/src/v2/components/chat/__tests__/CopilotChat.welcomeGate.test.tsx

@@ -9,8 +9,7 @@ import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 
 /**
  * Mock agent that records every connectAgent() invocation and resolves
- * immediately with an empty run result. Tracking lives on the class so
- * per-thread clones (from useAgent's WeakMap) share the counter.
+ * immediately with an empty run result.
  */
 class TrackingAgent extends MockStepwiseAgent {
   static connectCalls: Array<{
@@ -107,7 +106,6 @@ describe("CopilotChat welcome / connect integration", () => {
         expect(TrackingAgent.connectCalls.length).toBeGreaterThan(0);
       });
 
-      // The per-thread clone carries threadId; agentId is the default.
       expect(
         TrackingAgent.connectCalls.some((c) => c.threadId === "real-thread"),
       ).toBe(true);

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { z } from "zod";
+import type { AbstractAgent } from "@ag-ui/client";
 import { EventType } from "@ag-ui/client";
 import {
   MockReconnectableAgent,
@@ -17,9 +18,7 @@ import {
   CopilotKitProvider,
   useCopilotKit,
 } from "../../../providers";
-import type { AbstractAgent } from "@ag-ui/client";
 import { IntelligenceAgent } from "@copilotkit/core";
-import { getThreadClone } from "../../../hooks/use-agent";
 import { createA2UIMessageRenderer } from "../../../a2ui/A2UIMessageRenderer";
 import type { Theme } from "@copilotkit/a2ui-renderer";
 import { CopilotChat } from "..";
@@ -306,18 +305,28 @@ describe("CopilotChat activity message rendering", () => {
     expect(capturedCopilotkit).toBeDefined();
   });
 
-  it("passes the per-thread clone (not the registry agent) to activity message renderers", async () => {
-    // Regression test for: A2UI button clicks firing runAgent on the registry
-    // agent instead of the per-thread clone that CopilotChat renders from.
-    // Caused by useRenderActivityMessage calling copilotkit.getAgent() directly
-    // instead of getThreadClone(registryAgent, threadId) ?? registryAgent.
-    const agent = new MockStepwiseAgent();
-    const agentId = "action-agent";
-    agent.agentId = agentId;
-    const threadId = "thread-for-action-test";
+  it("activity renderers receive the agent under the config agentId, not any other registered agent", async () => {
+    // Regression: the renderer's `agent` prop must come from
+    // `copilotkit.getAgent(config.agentId)` — the local registry id from
+    // CopilotChatConfigurationProvider — not from any other agent in the
+    // registry (e.g. a sibling chat's agent).
+    //
+    // The trap this catches is a refactor where the renderer pipeline keys
+    // on something other than `config.agentId` (e.g. for proxied
+    // registrations, accidentally keying on `proxy.runtimeAgentId`). The
+    // assertion shape — "two agents in the registry, the renderer must
+    // receive the one matching config.agentId" — is generic to that bug
+    // class. The proxy-routing-specific behavior (registering a
+    // ProxiedCopilotRuntimeAgent with `runtimeAgentId !== agentId` and
+    // verifying `getAgent(agentId)` returns the proxy, not the agent at
+    // runtimeAgentId) is covered by `core-register-proxied-agent.test.ts`
+    // at the registry level.
+    const localAgent = new MockStepwiseAgent();
+    localAgent.agentId = "chat-1";
+    const otherAgent = new MockStepwiseAgent();
+    otherAgent.agentId = "default";
 
     let capturedAgent: AbstractAgent | undefined;
-
     const activityRenderer: ReactActivityMessageRenderer<{ label: string }> = {
       activityType: "button-action",
       content: z.object({ label: z.string() }),
@@ -328,9 +337,9 @@ describe("CopilotChat activity message rendering", () => {
     };
 
     renderWithCopilotKit({
-      agents: { [agentId]: agent },
-      agentId,
-      threadId,
+      agents: { "chat-1": localAgent, default: otherAgent },
+      agentId: "chat-1",
+      threadId: "thread-for-action-test",
       renderActivityMessages: [activityRenderer],
     });
 
@@ -342,27 +351,22 @@ describe("CopilotChat activity message rendering", () => {
       expect(screen.getByText("show me buttons")).toBeDefined();
     });
 
-    agent.emit(runStartedEvent());
-    agent.emit(
+    localAgent.emit(runStartedEvent());
+    localAgent.emit(
       activitySnapshotEvent({
         messageId: testId("activity-action"),
         activityType: "button-action",
         content: { label: "Click Me" },
       }),
     );
-    agent.emit(runFinishedEvent());
+    localAgent.emit(runFinishedEvent());
 
     await waitFor(() => {
       expect(screen.getByTestId("action-button")).toBeDefined();
     });
 
-    // CopilotChat creates a per-thread clone via useAgent. The activity renderer
-    // must receive that clone so that handleAction → runAgent targets the same
-    // instance chat is rendering from.
-    const clone = getThreadClone(agent, threadId);
-    expect(clone).toBeDefined();
-    expect(capturedAgent).toBe(clone);
-    expect(capturedAgent).not.toBe(agent); // must NOT be the registry agent
+    expect(capturedAgent).toBe(localAgent);
+    expect(capturedAgent).not.toBe(otherAgent);
   });
 
   it("restores a completed A2UI surface after reconnect from an event-native baseline", async () => {

package/src/v2/components/chat/__tests__/CopilotSidebarView.position.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { CopilotSidebarView } from "../CopilotSidebarView";
+import { CopilotSidebar } from "../CopilotSidebar";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+} from "../../../__tests__/utils/test-helpers";
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      {children}
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const sampleMessages = [{ id: "1", role: "user" as const, content: "Hello" }];
+
+function getSidebarAside(container: HTMLElement) {
+  const sidebar = container.querySelector("[data-copilot-sidebar]");
+  if (!sidebar) throw new Error("sidebar aside not found");
+  return sidebar;
+}
+
+describe("CopilotSidebarView position prop", () => {
+  describe("CopilotSidebarView", () => {
+    it("defaults to right-anchored when position is omitted", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView messages={sampleMessages} />
+        </TestWrapper>,
+      );
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:right-0")).toBe(true);
+      expect(aside.classList.contains("cpk:border-l")).toBe(true);
+      expect(aside.classList.contains("cpk:left-0")).toBe(false);
+      expect(aside.classList.contains("cpk:border-r")).toBe(false);
+    });
+
+    it('renders right-anchored when position="right" explicitly', () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView messages={sampleMessages} position="right" />
+        </TestWrapper>,
+      );
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:right-0")).toBe(true);
+      expect(aside.classList.contains("cpk:border-l")).toBe(true);
+      expect(aside.classList.contains("cpk:left-0")).toBe(false);
+      expect(aside.classList.contains("cpk:border-r")).toBe(false);
+    });
+
+    it('renders left-anchored when position="left"', () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView messages={sampleMessages} position="left" />
+        </TestWrapper>,
+      );
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:left-0")).toBe(true);
+      expect(aside.classList.contains("cpk:border-r")).toBe(true);
+      expect(aside.classList.contains("cpk:right-0")).toBe(false);
+      expect(aside.classList.contains("cpk:border-l")).toBe(false);
+    });
+
+    it('translates off-screen to the right when closed and position="right"', () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView
+            messages={sampleMessages}
+            defaultOpen={false}
+            position="right"
+          />
+        </TestWrapper>,
+      );
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:translate-x-full")).toBe(true);
+      expect(aside.classList.contains("cpk:-translate-x-full")).toBe(false);
+    });
+
+    it('translates off-screen to the left when closed and position="left"', () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView
+            messages={sampleMessages}
+            defaultOpen={false}
+            position="left"
+          />
+        </TestWrapper>,
+      );
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:-translate-x-full")).toBe(true);
+      expect(aside.classList.contains("cpk:translate-x-full")).toBe(false);
+    });
+
+    it('anchors the toggle button to the left when position="left"', () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView messages={sampleMessages} position="left" />
+        </TestWrapper>,
+      );
+
+      const toggle = container.querySelector(
+        '[data-slot="chat-toggle-button"]',
+      );
+      if (!toggle) throw new Error("toggle button not found");
+      expect(toggle.classList.contains("cpk:left-6")).toBe(true);
+      expect(toggle.classList.contains("cpk:right-auto")).toBe(true);
+    });
+
+    it("keeps the toggle button right-anchored by default", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotSidebarView messages={sampleMessages} />
+        </TestWrapper>,
+      );
+
+      const toggle = container.querySelector(
+        '[data-slot="chat-toggle-button"]',
+      );
+      if (!toggle) throw new Error("toggle button not found");
+      expect(toggle.classList.contains("cpk:right-6")).toBe(true);
+      expect(toggle.classList.contains("cpk:left-6")).toBe(false);
+    });
+  });
+
+  describe("CopilotSidebar wrapper", () => {
+    it('forwards position="left" through to CopilotSidebarView', () => {
+      const { container } = renderWithCopilotKit({
+        agent: new MockStepwiseAgent(),
+        children: <CopilotSidebar position="left" />,
+      });
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:left-0")).toBe(true);
+      expect(aside.classList.contains("cpk:border-r")).toBe(true);
+    });
+
+    it("defaults to right-anchored when position is omitted", () => {
+      const { container } = renderWithCopilotKit({
+        agent: new MockStepwiseAgent(),
+        children: <CopilotSidebar />,
+      });
+
+      const aside = getSidebarAside(container);
+      expect(aside.classList.contains("cpk:right-0")).toBe(true);
+      expect(aside.classList.contains("cpk:border-l")).toBe(true);
+    });
+  });
+});