@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/sharing/SharedAgentChat.tsx

@@ -124,7 +124,7 @@ export function SharedAgentChat({
   if (isLoading) {
     return (
       <div
-        className={cn("flex h-full w-full items-center justify-center", className)}
+        className={cn("stg:flex stg:h-full stg:w-full stg:items-center stg:justify-center", className)}
         aria-busy="true"
         aria-label="Loading agent"
       >
@@ -135,7 +135,7 @@ export function SharedAgentChat({
 
   if (error) {
     return (
-      <div className={cn("flex h-full w-full items-center justify-center", className)}>
+      <div className={cn("stg:flex stg:h-full stg:w-full stg:items-center stg:justify-center", className)}>
         <StateCard
           title="Something went wrong"
           message={getUserMessage(error)}
@@ -151,7 +151,7 @@ export function SharedAgentChat({
   // no deployment to chat with, so it presents as the same state.
   if (!profile || !profile.defaultInstanceId) {
     return (
-      <div className={cn("flex h-full w-full items-center justify-center", className)}>
+      <div className={cn("stg:flex stg:h-full stg:w-full stg:items-center stg:justify-center", className)}>
         <StateCard
           title="This agent isn't available"
           message="The link may be incorrect, or sharing may have been turned off."
@@ -161,35 +161,35 @@ export function SharedAgentChat({
   }
 
   return (
-    <div className={cn("flex h-full w-full flex-col", className)}>
-      <header className="flex items-center gap-3 border-b border-border px-4 py-3">
+    <div className={cn("stg:flex stg:h-full stg:w-full stg:flex-col", className)}>
+      <header className="stg:flex stg:items-center stg:gap-3 stg:border-b stg:border-border stg:px-4 stg:py-3">
         {profile.iconUrl ? (
           <img
             src={profile.iconUrl}
             alt=""
-            className="size-8 rounded-md object-cover"
+            className="stg:size-8 stg:rounded-md stg:object-cover"
           />
         ) : (
           <div
             aria-hidden="true"
-            className="flex size-8 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground"
+            className="stg:flex stg:size-8 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted stg:text-sm stg:font-semibold stg:text-muted-foreground"
           >
             {(profile.name || slug).charAt(0).toUpperCase()}
           </div>
         )}
-        <div className="min-w-0">
-          <h1 className="truncate text-sm font-semibold text-foreground">
+        <div className="stg:min-w-0">
+          <h1 className="stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
             {profile.name || slug}
           </h1>
           {profile.description && (
-            <p className="truncate text-xs text-muted-foreground">
+            <p className="stg:truncate stg:text-xs stg:text-muted-foreground">
               {profile.description}
             </p>
           )}
         </div>
       </header>
 
-      <div className="min-h-0 flex-1">
+      <div className="stg:min-h-0 stg:flex-1">
         {sessionId ? (
           <SessionViewer
             sessionId={sessionId}
@@ -212,7 +212,7 @@ export function SharedAgentChat({
               submitError ? (
                 <p
                   role="alert"
-                  className="text-center text-xs text-destructive"
+                  className="stg:text-center stg:text-xs stg:text-destructive"
                 >
                   {submitError}
                 </p>
@@ -223,12 +223,12 @@ export function SharedAgentChat({
       </div>
 
       {showPoweredBy && (
-        <footer className="border-t border-border px-4 py-2 text-center">
+        <footer className="stg:border-t stg:border-border stg:px-4 stg:py-2 stg:text-center">
           <a
             href="https://stigmer.ai"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
+            className="stg:text-[0.65rem] stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
           >
             Powered by Stigmer
           </a>
@@ -244,10 +244,10 @@ export function SharedAgentChat({
 
 function LoadingSkeleton() {
   return (
-    <div className="w-full max-w-sm space-y-3 px-6">
-      <div className="mx-auto h-8 w-8 animate-pulse rounded-md bg-muted" />
-      <div className="mx-auto h-4 w-2/3 animate-pulse rounded bg-muted" />
-      <div className="mx-auto h-3 w-1/2 animate-pulse rounded bg-muted" />
+    <div className="stg:w-full stg:max-w-sm stg:space-y-3 stg:px-6">
+      <div className="stg:mx-auto stg:h-8 stg:w-8 stg:animate-pulse stg:rounded-md stg:bg-muted" />
+      <div className="stg:mx-auto stg:h-4 stg:w-2/3 stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:mx-auto stg:h-3 stg:w-1/2 stg:animate-pulse stg:rounded stg:bg-muted" />
     </div>
   );
 }
@@ -262,17 +262,17 @@ function StateCard({
   readonly onRetry?: () => void;
 }) {
   return (
-    <div className="mx-6 w-full max-w-sm rounded-lg border border-border bg-card p-6 text-center shadow-sm">
-      <h2 className="text-base font-semibold text-foreground">{title}</h2>
-      <p className="mt-1 text-sm text-muted-foreground">{message}</p>
+    <div className="stg:mx-6 stg:w-full stg:max-w-sm stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-6 stg:text-center stg:shadow-sm">
+      <h2 className="stg:text-base stg:font-semibold stg:text-foreground">{title}</h2>
+      <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">{message}</p>
       {onRetry && (
         <button
           type="button"
           onClick={onRetry}
           className={cn(
-            "mt-4 inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "transition-colors",
+            "stg:mt-4 stg:inline-flex stg:items-center stg:justify-center stg:rounded-md stg:px-4 stg:py-2 stg:text-sm stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:transition-colors",
           )}
         >
           Try again

package/src/sharing/__tests__/AgentShareList.test.tsx

@@ -7,6 +7,7 @@ import type { AgentShareInput } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
 import { FetchCacheContext } from "../../internal/FetchCacheProvider";
 import { DeploymentModeContext } from "../../deployment-mode";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentShareList } from "../AgentShareList";
 
 // Toasts are visual feedback owned by the feedback module; keep them inert.
@@ -14,13 +15,6 @@ vi.mock("../../feedback/toast", () => ({
   toast: { success: vi.fn(), error: vi.fn() },
 }));
 
-// The row actions live in a Base UI menu, whose content is portaled to the
-// SDK portal container. Without a StigmerProvider that container is null and
-// the menu renders nothing — pin it to document.body so the menu mounts.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 beforeAll(() => {
   // happy-dom does not implement the native dialog show/close methods.
   HTMLDialogElement.prototype.showModal = function showModal() {
@@ -180,8 +174,7 @@ async function openRowMenu(rowName?: string) {
   const scope = rowName
     ? within(screen.getByText(rowName).closest("tr")!)
     : screen;
-  fireEvent.click(scope.getByRole("button", { name: /^Actions for/ }));
-  await screen.findByRole("menuitem", { name: "Edit" });
+  await openMenu(scope.getByRole("button", { name: /^Actions for/ }));
 }
 
 describe("AgentShareList", () => {
@@ -449,8 +442,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
-      expect(await screen.findByRole("menuitem", { name: "Delete" })).toBeTruthy();
+      await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
+      expect(screen.getByRole("menuitem", { name: "Delete" })).toBeTruthy();
       expect(screen.queryByRole("menuitem", { name: "Edit" })).toBeNull();
       expect(screen.queryByRole("menuitem", { name: "Pause" })).toBeNull();
       expect(screen.queryByRole("menuitem", { name: "Reset link" })).toBeNull();

package/src/sidebar/SettingsSidebar.tsx

@@ -87,7 +87,7 @@ export function SettingsSidebar({
       footer={footer}
     >
       {/* Back to Sessions */}
-      <div className="flex-none px-3 py-1">
+      <div className="stg:flex-none stg:px-3 stg:py-1">
         {renderLink({
           id: "back-to-sessions",
           href: backHref,
@@ -96,7 +96,7 @@ export function SettingsSidebar({
           "aria-current": undefined,
           children: (
             <>
-              <ArrowLeft className="size-4 shrink-0" />
+              <ArrowLeft className="stg:size-4 stg:shrink-0" />
               Back to Sessions
             </>
           ),
@@ -106,10 +106,10 @@ export function SettingsSidebar({
       <SidebarSeparator />
 
       {/* Settings nav links — grouped, permission-aware via `groups` */}
-      <div className="flex flex-col gap-4 px-3 py-1">
+      <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-1">
         {groups.map((group) => (
-          <div key={group.label} className="flex flex-col gap-0.5">
-            <span className="text-sidebar-muted-foreground px-2 pb-1 text-[11px] font-medium tracking-wider uppercase">
+          <div key={group.label} className="stg:flex stg:flex-col stg:gap-0.5">
+            <span className="stg:text-sidebar-muted-foreground stg:px-2 stg:pb-1 stg:text-[11px] stg:font-medium stg:tracking-wider stg:uppercase">
               {group.label}
             </span>
             {group.items.map((item) => {
@@ -123,7 +123,7 @@ export function SettingsSidebar({
                   key={item.href}
                   href={item.href}
                   label={item.label}
-                  icon={<item.icon className="size-4 shrink-0" />}
+                  icon={<item.icon className="stg:size-4 stg:shrink-0" />}
                   active={active}
                   renderLink={renderLink}
                 />
@@ -134,7 +134,7 @@ export function SettingsSidebar({
       </div>
 
       {/* Spacer pushes the footer to the bottom (no scrollable middle). */}
-      <div className="flex-1" />
+      <div className="stg:flex-1" />
     </SidebarChrome>
   );
 }

package/src/sidebar/WorkspaceSidebar.tsx

@@ -196,9 +196,9 @@ export function WorkspaceSidebar({
       <SidebarSeparator />
 
       {/* Scrollable recents */}
-      <ScrollArea className="flex-1">
-        <div className="p-3">
-          <p className="text-sidebar-muted-foreground mb-2 px-1 text-[11px] font-semibold tracking-wider uppercase">
+      <ScrollArea className="stg:flex-1">
+        <div className="stg:p-3">
+          <p className="stg:text-sidebar-muted-foreground stg:mb-2 stg:px-1 stg:text-[11px] stg:font-semibold stg:tracking-wider stg:uppercase">
             Recents
           </p>
           {isLoading ? (
@@ -246,7 +246,7 @@ function PrimaryNavRow({
   readonly accessory?: ReactNode;
 }) {
   return (
-    <div className="flex-none px-3 py-1">
+    <div className="stg:flex-none stg:px-3 stg:py-1">
       {renderLink({
         id,
         href,
@@ -255,7 +255,7 @@ function PrimaryNavRow({
         "aria-current": active ? "page" : undefined,
         children: (
           <>
-            <Icon className="size-4 shrink-0" />
+            <Icon className="stg:size-4 stg:shrink-0" />
             {label}
             {accessory}
           </>
@@ -274,14 +274,14 @@ function PrimaryNavRow({
  */
 function WantsHumanBadge({ count }: { readonly count: number }) {
   return (
-    <span className="ml-auto flex shrink-0 items-center">
+    <span className="stg:ml-auto stg:flex stg:shrink-0 stg:items-center">
       <span
         aria-hidden="true"
-        className="bg-sidebar-primary text-sidebar-primary-foreground rounded-full px-1.5 py-0.5 text-[10px] leading-none font-semibold tabular-nums"
+        className="stg:bg-sidebar-primary stg:text-sidebar-primary-foreground stg:rounded-full stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:leading-none stg:font-semibold stg:tabular-nums"
       >
         {count > 99 ? "99+" : count}
       </span>
-      <span className="sr-only">
+      <span className="stg:sr-only">
         {count === 1
           ? "1 conversation needs a human"
           : `${count} conversations need a human`}
@@ -307,13 +307,13 @@ function ActivityGroupList({
 }) {
   return (
     <TooltipProvider>
-      <div className="space-y-4">
+      <div className="stg:space-y-4">
         {groups.map((group) => (
           <div key={group.label}>
-            <p className="text-sidebar-muted-foreground mb-1 px-2 text-[10px] font-medium tracking-wider uppercase">
+            <p className="stg:text-sidebar-muted-foreground stg:mb-1 stg:px-2 stg:text-[10px] stg:font-medium stg:tracking-wider stg:uppercase">
               {group.label}
             </p>
-            <ul className="space-y-0.5" role="list">
+            <ul className="stg:space-y-0.5" role="list">
               {group.entries.map((entry) => (
                 <ActivityEntry
                   key={entry.id}
@@ -365,21 +365,21 @@ const ActivityEntry = memo(function ActivityEntry({
     className: cnActivityRow(isActive),
     children: (
       <>
-        <TypeIcon className="mt-0.5 size-3 shrink-0 opacity-50" aria-hidden="true" />
-        <span className="line-clamp-2 flex-1">{entry.subject}</span>
+        <TypeIcon className="stg:mt-0.5 stg:size-3 stg:shrink-0 stg:opacity-50" aria-hidden="true" />
+        <span className="stg:line-clamp-2 stg:flex-1">{entry.subject}</span>
         {/* Last-activity stamp + noteworthy status: the list sorts by
             activity while execution names embed creation time, so the row
             must say WHY it is here ("failed · 2h"). */}
-        <span className="flex shrink-0 flex-col items-end gap-0.5 text-[10px] leading-tight">
-          <span className="text-sidebar-muted-foreground tabular-nums">
+        <span className="stg:flex stg:shrink-0 stg:flex-col stg:items-end stg:gap-0.5 stg:text-[10px] stg:leading-tight">
+          <span className="stg:text-sidebar-muted-foreground stg:tabular-nums">
             {formatRelativeTime(entry.updatedAt, now)}
           </span>
           {statusBadge && (
             <span
               className={
                 statusBadge.tone === "destructive"
-                  ? "text-destructive"
-                  : "text-sidebar-muted-foreground"
+                  ? "stg:text-destructive"
+                  : "stg:text-sidebar-muted-foreground"
               }
             >
               {statusBadge.label}
@@ -406,17 +406,17 @@ const ActivityEntry = memo(function ActivityEntry({
 /** Recents rows are denser than primary nav: 12px text, top-aligned icon. */
 function cnActivityRow(active: boolean): string {
   return active
-    ? "flex items-start gap-2 rounded-lg px-2 py-1.5 text-xs transition-colors bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-    : "flex items-start gap-2 rounded-lg px-2 py-1.5 text-xs transition-colors text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+    ? "stg:flex stg:items-start stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors stg:bg-sidebar-accent stg:text-sidebar-accent-foreground stg:font-medium"
+    : "stg:flex stg:items-start stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors stg:text-sidebar-foreground stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground";
 }
 
 function RecentsSkeletons() {
   return (
-    <div className="space-y-2 px-2" aria-busy="true" aria-label="Loading sessions">
+    <div className="stg:space-y-2 stg:px-2" aria-busy="true" aria-label="Loading sessions">
       {Array.from({ length: 5 }, (_, i) => (
         <div
           key={i}
-          className="bg-sidebar-muted h-5 animate-pulse rounded"
+          className="stg:bg-sidebar-muted stg:h-5 stg:animate-pulse stg:rounded"
           style={{ width: `${70 + Math.sin(i * 1.5) * 20}%` }}
         />
       ))}
@@ -427,7 +427,7 @@ function RecentsSkeletons() {
 function RecentsError({ message }: { readonly message: string }) {
   return (
     <>
-      <p className="text-destructive mb-4 px-2 text-xs" role="alert">
+      <p className="stg:text-destructive stg:mb-4 stg:px-2 stg:text-xs" role="alert">
         {message}
       </p>
       <RecentsEmptyState />
@@ -437,9 +437,9 @@ function RecentsError({ message }: { readonly message: string }) {
 
 function RecentsEmptyState() {
   return (
-    <div className="flex flex-col items-center gap-2 py-8 text-center">
-      <MessageSquare className="text-sidebar-muted-foreground size-8" />
-      <p className="text-sidebar-muted-foreground text-xs">No recent activity</p>
+    <div className="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-8 stg:text-center">
+      <MessageSquare className="stg:text-sidebar-muted-foreground stg:size-8" />
+      <p className="stg:text-sidebar-muted-foreground stg:text-xs">No recent activity</p>
     </div>
   );
 }

package/src/sidebar/__tests__/SettingsSidebar.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { describe, it, expect, beforeAll, afterEach } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { createRouterTransport } from "@connectrpc/connect";
@@ -9,10 +9,6 @@ import { SETTINGS_NAV_GROUPS } from "../../settings/settings-nav";
 import { SettingsSidebar } from "../SettingsSidebar";
 import type { RenderSidebarLink } from "../types";
 
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 beforeAll(() => {
   if (!("ResizeObserver" in globalThis)) {
     (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
@@ -82,7 +78,7 @@ describe("SettingsSidebar", () => {
 
     const active = container.querySelector('[data-row-id="api-keys"]')!;
     expect(active.getAttribute("aria-current")).toBe("page");
-    expect(active.className).toContain("bg-sidebar-accent");
+    expect(active.className).toContain("stg:bg-sidebar-accent");
 
     // "/settings/api-keys/rotate" must not light up e.g. "/settings/members".
     const inactive = container.querySelector('[data-row-id="members"]')!;
@@ -96,7 +92,7 @@ describe("SettingsSidebar", () => {
 
     const back = container.querySelector('[data-row-id="back-to-sessions"]')!;
     expect(back.getAttribute("href")).toBe("/sessions/ses_123");
-    expect(back.className).toContain("text-sidebar-muted-foreground");
+    expect(back.className).toContain("stg:text-sidebar-muted-foreground");
     expect(back.textContent).toContain("Back to Sessions");
   });
 

package/src/sidebar/__tests__/WorkspaceSidebar.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { describe, it, expect, beforeAll, afterEach } from "vitest";
 import { render, screen, cleanup, within } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { create } from "@bufbuild/protobuf";
@@ -14,13 +14,6 @@ import { WorkspaceSidebar } from "../WorkspaceSidebar";
 import type { RecentActivityEntry } from "../../activity/types";
 import type { RenderSidebarLink } from "../types";
 
-// Tooltips and the org switcher menu portal their content; without a
-// StigmerProvider the portal container is null — pin it to document.body
-// like sibling tests.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 beforeAll(() => {
   // happy-dom lacks ResizeObserver, which Base UI positioners observe.
   if (!("ResizeObserver" in globalThis)) {
@@ -182,12 +175,12 @@ describe("WorkspaceSidebar — primary navigation", () => {
 
     const library = container.querySelector('[data-row-id="library"]')!;
     expect(library.getAttribute("aria-current")).toBe("page");
-    expect(library.className.split(" ")).toContain("bg-sidebar-accent");
+    expect(library.className.split(" ")).toContain("stg:bg-sidebar-accent");
 
     const dashboard = container.querySelector('[data-row-id="dashboard"]')!;
     expect(dashboard.getAttribute("aria-current")).toBeNull();
     // (hover:bg-sidebar-accent is fine — only the resting accent means active)
-    expect(dashboard.className.split(" ")).not.toContain("bg-sidebar-accent");
+    expect(dashboard.className.split(" ")).not.toContain("stg:bg-sidebar-accent");
   });
 });
 
@@ -222,7 +215,7 @@ describe("WorkspaceSidebar — recents", () => {
     );
 
     const active = container.querySelector('[data-row-id="ses_today"]')!;
-    expect(active.className).toContain("bg-sidebar-accent");
+    expect(active.className).toContain("stg:bg-sidebar-accent");
     expect(active.getAttribute("aria-current")).toBe("page");
     // The failed execution row explains why it is in the list.
     const failed = container.querySelector('[data-row-id="wex_yesterday"]')!;

package/src/sidebar/chrome.tsx

@@ -62,10 +62,10 @@ export function SidebarChrome({
     <nav
       id="sidebar"
       aria-label={ariaLabel}
-      className="bg-sidebar text-sidebar-foreground flex h-full flex-col"
+      className="stg:bg-sidebar stg:text-sidebar-foreground stg:flex stg:h-full stg:flex-col"
     >
       {/* Top row: collapse toggle + org context */}
-      <div className="flex flex-none items-center gap-1 px-2 py-2">
+      <div className="stg:flex stg:flex-none stg:items-center stg:gap-1 stg:px-2 stg:py-2">
         <button
           type="button"
           onClick={onCollapse}
@@ -73,16 +73,16 @@ export function SidebarChrome({
           aria-controls="sidebar"
           aria-label="Collapse sidebar"
           className={cn(
-            "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
-            "text-sidebar-foreground transition-colors motion-reduce:transition-none",
-            "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-            "aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground",
-            "focus-visible:ring-sidebar-ring focus-visible:ring-2 focus-visible:outline-none",
+            "stg:inline-flex stg:size-7 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-md",
+            "stg:text-sidebar-foreground stg:transition-colors stg:motion-reduce:transition-none",
+            "stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
+            "stg:aria-expanded:bg-sidebar-accent stg:aria-expanded:text-sidebar-accent-foreground",
+            "stg:focus-visible:ring-sidebar-ring stg:focus-visible:ring-2 stg:focus-visible:outline-none",
           )}
         >
-          <PanelLeft className="size-4" />
+          <PanelLeft className="stg:size-4" />
         </button>
-        <div className="min-w-0 flex-1">
+        <div className="stg:min-w-0 stg:flex-1">
           <OrgSwitcher onOrgChanged={onOrgChanged} />
         </div>
       </div>
@@ -90,7 +90,7 @@ export function SidebarChrome({
       {children}
 
       {/* Bottom: user menu */}
-      <div className="border-sidebar-border flex-none border-t px-3 py-2">
+      <div className="stg:border-sidebar-border stg:flex-none stg:border-t stg:px-3 stg:py-2">
         {footer}
       </div>
     </nav>
@@ -100,8 +100,8 @@ export function SidebarChrome({
 /** Hairline separator between sidebar sections. */
 export function SidebarSeparator() {
   return (
-    <div className="px-3 py-1">
-      <div className="bg-sidebar-border h-px" />
+    <div className="stg:px-3 stg:py-1">
+      <div className="stg:bg-sidebar-border stg:h-px" />
     </div>
   );
 }
@@ -118,12 +118,12 @@ export function navRowClassName(
   { muted = false }: { muted?: boolean } = {},
 ): string {
   return cn(
-    "flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors",
+    "stg:flex stg:items-center stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
     active
-      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+      ? "stg:bg-sidebar-accent stg:text-sidebar-accent-foreground"
       : cn(
-          muted ? "text-sidebar-muted-foreground" : "text-sidebar-foreground",
-          "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          muted ? "stg:text-sidebar-muted-foreground" : "stg:text-sidebar-foreground",
+          "stg:hover:bg-sidebar-accent stg:hover:text-sidebar-accent-foreground",
         ),
   );
 }