@agent-native/core 0.86.0 → 0.87.0

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -11,6 +11,12 @@ import {
   type AttributedRecentEdit,
   type CollabUser,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import {
   IconAlertTriangle,
@@ -30,12 +36,6 @@ import { createPortal } from "react-dom";
 import { ExcalidrawSlide } from "@/components/deck/ExcalidrawSlide";
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import {
   DrawOverlay,
   CanvasCommentPins,
@@ -796,10 +796,16 @@ export default function SlideEditor({
       const horizontalPadding =
         (parseFloat(trackStyle?.paddingLeft ?? "0") || 0) +
         (parseFloat(trackStyle?.paddingRight ?? "0") || 0);
+      const verticalPadding =
+        (parseFloat(trackStyle?.paddingTop ?? "0") || 0) +
+        (parseFloat(trackStyle?.paddingBottom ?? "0") || 0);
       const nextFitZoom = computeCanvasFitZoom({
         viewportWidth: scrollContainer.clientWidth,
+        viewportHeight: scrollContainer.clientHeight,
         canvasWidth: dims.width,
+        canvasHeight: dims.height,
         horizontalPadding,
+        verticalPadding,
       });
 
       setFitCanvasZoom(nextFitZoom);
@@ -1791,162 +1797,179 @@ export default function SlideEditor({
 
   return (
     <div
-      className="relative flex-1 flex flex-col h-full overflow-hidden"
+      className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
       data-slide-element-selected={slideElementSelected ? "true" : undefined}
     >
-      <div className="flex-1 overflow-hidden">
-        {slide.excalidrawData ? (
-          <div className="h-full bg-background">
-            <ExcalidrawSlide
-              initialData={slide.excalidrawData}
-              onChange={(data) => onUpdateSlide({ excalidrawData: data })}
-            />
-          </div>
-        ) : (
-          <div className="relative h-full bg-background">
-            <div className="absolute right-3 top-3 z-20 flex h-8 items-center gap-0.5 rounded-md border border-border bg-popover/95 px-1 shadow-lg backdrop-blur">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 cursor-pointer"
-                    onClick={canvasZoomOut}
-                    disabled={canvasZoom <= MIN_CANVAS_ZOOM}
-                    aria-label={t("raw.zoomOut")}
-                  >
-                    <IconZoomOut className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("raw.zoomOut")}</TooltipContent>
-              </Tooltip>
-              <span className="w-11 text-center text-xs tabular-nums text-muted-foreground">
-                {canvasZoom}%
-              </span>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 cursor-pointer"
-                    onClick={canvasZoomIn}
-                    disabled={
-                      canvasZoom >=
-                      CANVAS_ZOOM_PRESETS[CANVAS_ZOOM_PRESETS.length - 1]
-                    }
-                    aria-label={t("raw.zoomIn")}
-                  >
-                    <IconZoomIn className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("raw.zoomIn")}</TooltipContent>
-              </Tooltip>
-              <div className="mx-0.5 h-4 w-px bg-border" />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 cursor-pointer"
-                    onClick={fitCanvasToScreen}
-                    aria-label={t("raw.fitSlideToScreen")}
-                  >
-                    <IconMaximize className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("raw.fitToScreen")}</TooltipContent>
-              </Tooltip>
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <div className="min-w-0 flex-1 overflow-hidden">
+          {slide.excalidrawData ? (
+            <div className="h-full bg-background">
+              <ExcalidrawSlide
+                initialData={slide.excalidrawData}
+                onChange={(data) => onUpdateSlide({ excalidrawData: data })}
+              />
             </div>
-            <div
-              ref={scrollContainerRef}
-              className={`h-full overflow-auto ${
-                drawMode ? "pb-24 sm:pb-28" : ""
-              }`}
-            >
+          ) : (
+            <div className="relative h-full bg-background">
+              <div className="absolute right-3 top-3 z-20 flex h-8 items-center gap-0.5 rounded-md border border-border bg-popover/95 px-1 shadow-lg backdrop-blur">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 cursor-pointer"
+                      onClick={canvasZoomOut}
+                      disabled={canvasZoom <= MIN_CANVAS_ZOOM}
+                      aria-label={t("raw.zoomOut")}
+                    >
+                      <IconZoomOut className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("raw.zoomOut")}</TooltipContent>
+                </Tooltip>
+                <span className="w-11 text-center text-xs tabular-nums text-muted-foreground">
+                  {canvasZoom}%
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 cursor-pointer"
+                      onClick={canvasZoomIn}
+                      disabled={
+                        canvasZoom >=
+                        CANVAS_ZOOM_PRESETS[CANVAS_ZOOM_PRESETS.length - 1]
+                      }
+                      aria-label={t("raw.zoomIn")}
+                    >
+                      <IconZoomIn className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("raw.zoomIn")}</TooltipContent>
+                </Tooltip>
+                <div className="mx-0.5 h-4 w-px bg-border" />
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 cursor-pointer"
+                      onClick={fitCanvasToScreen}
+                      aria-label={t("raw.fitSlideToScreen")}
+                    >
+                      <IconMaximize className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("raw.fitToScreen")}</TooltipContent>
+                </Tooltip>
+              </div>
               <div
-                ref={canvasTrackRef}
-                className="flex min-h-full w-max min-w-full items-center justify-center p-2 pt-14 sm:p-4 sm:pt-14 md:p-8 md:pt-16"
+                ref={scrollContainerRef}
+                className={`h-full overflow-auto ${
+                  drawMode ? "pb-24 sm:pb-28" : ""
+                }`}
               >
                 <div
-                  ref={containerRef}
-                  data-main-slide-canvas="true"
-                  className="shrink-0"
-                  style={{ width: canvasWidth, maxWidth: canvasWidth }}
+                  ref={canvasTrackRef}
+                  className="flex min-h-full w-max min-w-full items-center justify-center p-2 pt-14 sm:p-4 sm:pt-14 md:p-8 md:pt-16"
                 >
                   <div
-                    ref={slideCanvasRef}
-                    className="slide-image-clickable relative"
-                    data-editable={!readOnly ? "true" : undefined}
-                    onClick={handleSlideClick}
-                    onContextMenu={handleSlideContextMenu}
-                    onDoubleClick={handleSlideDoubleClick}
-                    onPointerDown={handleSlidePointerDown}
-                    onDragOver={handleSlideDragOver}
-                    onDrop={handleSlideDrop}
-                    onMouseEnter={() => setIsHoveringText(true)}
-                    onMouseLeave={() => setIsHoveringText(false)}
+                    ref={containerRef}
+                    data-main-slide-canvas="true"
+                    className="shrink-0"
+                    style={{ width: canvasWidth, maxWidth: canvasWidth }}
                   >
-                    <SlideRenderer
-                      slide={slide}
-                      className={`shadow-2xl shadow-black/40 ${isHoveringText ? "ring-2 ring-[#609FF8]/60" : ""}`}
-                      designSystem={designSystem}
-                      aspectRatio={aspectRatio}
-                      onOverflowChange={handleOverflowChange}
-                    />
-                    {/* Fading "AI edited" ring around the canvas when the
-                          agent just edited THIS slide (component handles fade). */}
-                    {activeSlideEdits.length > 0 && (
-                      <RecentEditHighlights
-                        edits={activeSlideEdits}
-                        resolveRect={resolveCanvasRect}
-                        containerRef={slideCanvasRef}
+                    <div
+                      ref={slideCanvasRef}
+                      className="slide-image-clickable relative"
+                      data-editable={!readOnly ? "true" : undefined}
+                      onClick={handleSlideClick}
+                      onContextMenu={handleSlideContextMenu}
+                      onDoubleClick={handleSlideDoubleClick}
+                      onPointerDown={handleSlidePointerDown}
+                      onDragOver={handleSlideDragOver}
+                      onDrop={handleSlideDrop}
+                      onMouseEnter={() => setIsHoveringText(true)}
+                      onMouseLeave={() => setIsHoveringText(false)}
+                    >
+                      <SlideRenderer
+                        slide={slide}
+                        className={`shadow-2xl shadow-black/40 ${isHoveringText ? "ring-2 ring-[#609FF8]/60" : ""}`}
+                        designSystem={designSystem}
+                        aspectRatio={aspectRatio}
+                        onOverflowChange={handleOverflowChange}
                       />
-                    )}
-                    {/* Double-click hint — only shown for HTML slides that support inline editing */}
-                    {isHoveringText && !editingEl && isHtmlSlide && (
-                      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/60 px-2 py-0.5 text-xs text-white/40 pointer-events-none select-none">
-                        {t("raw.doubleClickEdit")}
-                      </div>
-                    )}
-                    {agentActive && (
-                      <div className="absolute top-2 right-2 z-10 pointer-events-none">
-                        <AgentPresenceChip active={agentActive} />
-                      </div>
-                    )}
-                    {presentUsers.length > 0 && (
-                      <div
-                        className={`absolute right-2 z-10 ${
-                          agentActive ? "top-11" : "top-2"
-                        }`}
-                      >
-                        <SameSlidePresenceIndicator users={presentUsers} />
-                      </div>
-                    )}
-                    {overflowInfo && !readOnly && !agentActive && (
-                      <div className="absolute top-3 left-3 z-20 flex items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 backdrop-blur px-2.5 py-1.5 text-xs text-amber-100 shadow-lg">
-                        <IconAlertTriangle
-                          className="h-3.5 w-3.5 flex-shrink-0"
-                          stroke={2}
+                      {/* Fading "AI edited" ring around the canvas when the
+                          agent just edited THIS slide (component handles fade). */}
+                      {activeSlideEdits.length > 0 && (
+                        <RecentEditHighlights
+                          edits={activeSlideEdits}
+                          resolveRect={resolveCanvasRect}
+                          containerRef={slideCanvasRef}
                         />
-                        <span className="leading-tight">
-                          Layout overflows by {overflowInfo.verticalOverflow}
-                          px
-                        </span>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          className="ml-1 h-6 cursor-pointer px-2 text-[11px] font-medium text-amber-100 hover:bg-amber-500/20 hover:text-white"
-                          onClick={handleAskAgentToFixLayout}
-                          disabled={isAskingAgentToFix}
+                      )}
+                      {/* Double-click hint — only shown for HTML slides that support inline editing */}
+                      {isHoveringText && !editingEl && isHtmlSlide && (
+                        <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/60 px-2 py-0.5 text-xs text-white/40 pointer-events-none select-none">
+                          {t("raw.doubleClickEdit")}
+                        </div>
+                      )}
+                      {agentActive && (
+                        <div className="absolute top-2 right-2 z-10 pointer-events-none">
+                          <AgentPresenceChip active={agentActive} />
+                        </div>
+                      )}
+                      {presentUsers.length > 0 && (
+                        <div
+                          className={`absolute right-2 z-10 ${
+                            agentActive ? "top-11" : "top-2"
+                          }`}
                         >
-                          {isAskingAgentToFix ? "Asking…" : "Fix with AI"}
-                        </Button>
-                      </div>
-                    )}
+                          <SameSlidePresenceIndicator users={presentUsers} />
+                        </div>
+                      )}
+                      {overflowInfo && !readOnly && !agentActive && (
+                        <div className="absolute top-3 left-3 z-20 flex items-center gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 backdrop-blur px-2.5 py-1.5 text-xs text-amber-100 shadow-lg">
+                          <IconAlertTriangle
+                            className="h-3.5 w-3.5 flex-shrink-0"
+                            stroke={2}
+                          />
+                          <span className="leading-tight">
+                            Layout overflows by {overflowInfo.verticalOverflow}
+                            px
+                          </span>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="ml-1 h-6 cursor-pointer px-2 text-[11px] font-medium text-amber-100 hover:bg-amber-500/20 hover:text-white"
+                            onClick={handleAskAgentToFixLayout}
+                            disabled={isAskingAgentToFix}
+                          >
+                            {isAskingAgentToFix ? "Asking…" : "Fix with AI"}
+                          </Button>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+          )}
+        </div>
+
+        {selectedStyleSnapshot && !readOnly && (
+          <div className="hidden h-full w-[17rem] shrink-0 border-l border-border/70 bg-background/95 lg:block">
+            <SlideStyleInspector
+              snapshot={selectedStyleSnapshot}
+              designSystem={designSystem}
+              className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
+              onChange={applySelectedStylePatch}
+              onClose={() => {
+                clearSelectedElement();
+                syncSelectionToAppState(null);
+              }}
+            />
           </div>
         )}
       </div>
@@ -1963,20 +1986,6 @@ export default function SlideEditor({
         <ElementSelectionOutline rect={selectedElementRect} />
       )}
 
-      {selectedStyleSnapshot && !readOnly && (
-        <div className="pointer-events-none absolute right-3 top-14 z-[80] hidden md:block">
-          <SlideStyleInspector
-            snapshot={selectedStyleSnapshot}
-            designSystem={designSystem}
-            onChange={applySelectedStylePatch}
-            onClose={() => {
-              clearSelectedElement();
-              syncSelectionToAppState(null);
-            }}
-          />
-        </div>
-      )}
-
       {/* Multi-select outlines */}
       {Array.from(multiSelectionRects.entries()).map(([id, v]) => (
         <MultiSelectOutline key={id} rect={v.rect} />

package/corpus/templates/slides/app/components/editor/SlideStyleInspector.tsx

@@ -1,12 +1,13 @@
 import {
   useT,
+  VisualColorPicker,
   VisualControlRow,
   VisualInspectorPanel,
   VisualInspectorSection,
   VisualScrubInput,
   VisualSegmentedControl,
-  VisualSwatchControl,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import type { DesignSystemData } from "@shared/api";
 import {
   IconAlignCenter,
@@ -20,8 +21,6 @@ import {
   IconX,
 } from "@tabler/icons-react";
 
-import { Button } from "@/components/ui/button";
-
 export interface SlideStyleSnapshot {
   selector: string;
   label: string;
@@ -125,16 +124,19 @@ function tokenPalette(
 export function SlideStyleInspector({
   snapshot,
   designSystem,
+  className,
   onChange,
   onClose,
 }: {
   snapshot: SlideStyleSnapshot;
   designSystem?: DesignSystemData;
+  className?: string;
   onChange: (patch: SlideStylePatch) => void;
   onClose: () => void;
 }) {
   const t = useT();
   const palette = tokenPalette(designSystem, t);
+  const documentColors = palette.map((option) => option.value);
   const targetLabel =
     snapshot.textPreview || snapshot.label || snapshot.tagName.toUpperCase();
 
@@ -142,7 +144,7 @@ export function SlideStyleInspector({
     <VisualInspectorPanel
       title={t("styleInspector.title")}
       subtitle={targetLabel}
-      className="pointer-events-auto"
+      className={className}
       headerAction={
         <Button
           type="button"
@@ -166,9 +168,10 @@ export function SlideStyleInspector({
           }
         >
           <VisualControlRow label={t("styleInspector.color")}>
-            <VisualSwatchControl
-              options={palette}
+            <VisualColorPicker
+              label={t("styleInspector.color")}
               value={snapshot.color}
+              documentColors={documentColors}
               onChange={(value) => onChange({ color: value })}
             />
           </VisualControlRow>
@@ -235,16 +238,15 @@ export function SlideStyleInspector({
               : t("styleInspector.fill")
           }
         >
-          <VisualSwatchControl
-            options={[
-              {
-                label: t("styleInspector.transparent"),
-                value: "transparent",
-                color: "transparent",
-              },
-              ...palette,
-            ]}
+          <VisualColorPicker
+            label={
+              snapshot.isImage
+                ? t("styleInspector.tint")
+                : t("styleInspector.fill")
+            }
             value={snapshot.backgroundColor}
+            documentColors={documentColors}
+            allowTransparent
             onChange={(value) => onChange({ backgroundColor: value })}
           />
         </VisualControlRow>
@@ -288,9 +290,10 @@ export function SlideStyleInspector({
           />
         </div>
         <VisualControlRow label={t("styleInspector.strokeColor")}>
-          <VisualSwatchControl
-            options={palette}
+          <VisualColorPicker
+            label={t("styleInspector.strokeColor")}
             value={snapshot.borderColor}
+            documentColors={documentColors}
             onChange={(value) => onChange({ borderColor: value })}
           />
         </VisualControlRow>

package/corpus/templates/slides/app/components/editor/SpeakerNotesPanel.tsx

@@ -1,6 +1,6 @@
 import { useT } from "@agent-native/core/client";
-import { IconChevronUp, IconChevronDown } from "@tabler/icons-react";
-import { useState } from "react";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { useState, type PointerEvent as ReactPointerEvent } from "react";
 
 interface SpeakerNotesPanelProps {
   notes: string;
@@ -9,6 +9,14 @@ interface SpeakerNotesPanelProps {
   slideCount: number;
 }
 
+const MIN_NOTES_HEIGHT = 72;
+const MAX_NOTES_HEIGHT = 260;
+const DEFAULT_NOTES_HEIGHT = 112;
+
+function clampNotesHeight(value: number) {
+  return Math.min(MAX_NOTES_HEIGHT, Math.max(MIN_NOTES_HEIGHT, value));
+}
+
 export function SpeakerNotesPanel({
   notes,
   onChange,
@@ -23,6 +31,16 @@ export function SpeakerNotesPanel({
       return true;
     }
   });
+  const [height, setHeight] = useState(() => {
+    try {
+      const stored = Number(localStorage.getItem("speaker-notes-height"));
+      return Number.isFinite(stored)
+        ? clampNotesHeight(stored)
+        : DEFAULT_NOTES_HEIGHT;
+    } catch {
+      return DEFAULT_NOTES_HEIGHT;
+    }
+  });
 
   const toggle = () => {
     const next = !expanded;
@@ -32,11 +50,43 @@ export function SpeakerNotesPanel({
     } catch {}
   };
 
+  const startResize = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!expanded) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = height;
+    let latestHeight = startHeight;
+    const onMove = (moveEvent: PointerEvent) => {
+      latestHeight = clampNotesHeight(startHeight + startY - moveEvent.clientY);
+      setHeight(latestHeight);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      try {
+        localStorage.setItem("speaker-notes-height", String(latestHeight));
+      } catch {}
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp, { once: true });
+  };
+
   return (
-    <div className="border-t border-border bg-background flex-shrink-0">
+    <div className="flex-shrink-0 border-t border-border bg-background">
+      {expanded && (
+        <div
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label={t("raw.speakerNotes")}
+          className="group flex h-2 cursor-row-resize items-center justify-center"
+          onPointerDown={startResize}
+        >
+          <div className="h-px w-10 rounded-full bg-border transition-colors group-hover:bg-muted-foreground/70" />
+        </div>
+      )}
       <button
         onClick={toggle}
-        className="w-full flex items-center justify-between px-4 py-1.5 cursor-pointer"
+        className="flex w-full cursor-pointer items-center justify-between px-4 py-1.5"
       >
         <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
           {t("raw.speakerNotesForSlide", {
@@ -51,12 +101,12 @@ export function SpeakerNotesPanel({
         )}
       </button>
       {expanded && (
-        <div className="px-4 pb-3">
+        <div className="px-4 pb-3" style={{ height }}>
           <textarea
             value={notes || ""}
             onChange={(e) => onChange(e.target.value)}
             placeholder={t("raw.addSpeakerNotes")}
-            className="w-full h-20 bg-transparent text-muted-foreground text-xs font-mono placeholder:text-muted-foreground/70 resize-none outline-none"
+            className="h-full w-full resize-none bg-transparent font-mono text-xs text-muted-foreground outline-none placeholder:text-muted-foreground/70"
           />
         </div>
       )}

package/corpus/templates/slides/app/components/editor/TweaksPanel.tsx

@@ -4,9 +4,9 @@ import {
   VisualInspectorSection,
   VisualTweakControl,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconAdjustmentsHorizontal, IconX } from "@tabler/icons-react";
 
-import { Button } from "@/components/ui/button";
 import type { TweakDefinition } from "@/lib/design-systems";
 
 interface TweaksPanelProps {

package/corpus/templates/slides/app/components/layout/Header.tsx

@@ -1,11 +1,13 @@
 import { AgentToggleButton, useT } from "@agent-native/core/client";
 import { RunsTray } from "@agent-native/core/client/progress";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 import { useLocation } from "react-router";
 
 import { useDecks } from "@/context/DeckContext";
 
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
 const pageTitleKeys: Record<string, string> = {
   "/": "header.decks",
   "/design-systems": "header.designSystems",

package/corpus/templates/slides/app/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
 import { AgentSidebar, useT } from "@agent-native/core/client";
 import { InvitationBanner } from "@agent-native/core/client/org";
+import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
@@ -11,7 +12,6 @@ import { cn } from "@/lib/utils";
 
 import { AgentWorkIndicator } from "./AgentWorkIndicator";
 import { Header } from "./Header";
-import { HeaderActionsProvider } from "./HeaderActions";
 import { Sidebar } from "./Sidebar";
 
 interface LayoutProps {
@@ -121,7 +121,12 @@ export function Layout({ children }: LayoutProps) {
             )}
             {!ownToolbar && <Header />}
             <InvitationBanner />
-            <main className="agent-native-app-main min-h-0 flex-1 overflow-y-auto">
+            <main
+              className={cn(
+                "agent-native-app-main min-h-0 flex-1",
+                ownToolbar ? "overflow-hidden" : "overflow-y-auto",
+              )}
+            >
               {children}
             </main>
           </div>

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -6,6 +6,11 @@ import {
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconStack2,
   IconPalette,
@@ -15,11 +20,6 @@ import {
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 const navItems = [