Add devtools sidebar toggle

Show a dev-only devtools panel button beside the new note action and toggle the native panel show/hide command from the sidebar chrome.

Author: ComputelessComputer

apps/desktop/src/devtools-panel/host.tsx

@@ -57,6 +57,7 @@ type DevtoolsPanelAction =
   | "countdown:note-300"
   | "countdown:zoom-60"
   | "countdown:zoom-300"
+  | "panel:closed"
   | "error:trigger";
 
 export function DevtoolsFloatingPanelHost() {
@@ -427,6 +428,8 @@ function useDevtoolsPanelActions() {
         case "countdown:zoom-300":
           createWithCountdown(300, "https://zoom.us/j/1234567890");
           return;
+        case "panel:closed":
+          return;
         case "error:trigger":
           setShouldThrow(true);
           return;

apps/desktop/src/main/body.test.tsx

@@ -4,6 +4,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
 } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -21,6 +22,13 @@ const mocks = vi.hoisted(() => ({
   onPanelLayout: null as null | ((sizes: number[]) => void),
   onResizeDragging: null as null | ((isDragging: boolean) => void),
   tabContentRenderCount: 0,
+  devtoolsPanelActionListeners: [] as Array<
+    (event: { payload: { action: string } }) => void
+  >,
+  windowsCommands: {
+    devtoolsPanelHide: vi.fn(async () => ({ status: "ok" as const })),
+    devtoolsPanelShow: vi.fn(async () => ({ status: "ok" as const })),
+  },
 }));
 
 vi.mock("@hypr/ui/components/ui/resizable", () => ({
@@ -107,6 +115,25 @@ vi.mock("~/contexts/shell", () => ({
   }),
 }));
 
+vi.mock("@hypr/plugin-windows", () => ({
+  commands: mocks.windowsCommands,
+  events: {
+    devtoolsPanelAction: {
+      listen: vi.fn(
+        async (listener: (event: { payload: { action: string } }) => void) => {
+          mocks.devtoolsPanelActionListeners.push(listener);
+          return () => {
+            mocks.devtoolsPanelActionListeners =
+              mocks.devtoolsPanelActionListeners.filter(
+                (candidate) => candidate !== listener,
+              );
+          };
+        },
+      ),
+    },
+  },
+}));
+
 vi.mock("~/store/zustand/tabs", () => ({
   uniqueIdfromTab: (tab: { type: string }) => tab.type,
   useTabs: (
@@ -180,6 +207,9 @@ describe("ClassicMainBody", () => {
     mocks.onPanelLayout = null;
     mocks.onResizeDragging = null;
     mocks.tabContentRenderCount = 0;
+    mocks.devtoolsPanelActionListeners = [];
+    mocks.windowsCommands.devtoolsPanelHide.mockClear();
+    mocks.windowsCommands.devtoolsPanelShow.mockClear();
   });
 
   it("wraps the expanded left sidebar in a persistent resizable panel", () => {
@@ -369,6 +399,45 @@ describe("ClassicMainBody", () => {
     expect(mocks.leftsidebar.toggleExpanded).toHaveBeenCalledTimes(1);
   });
 
+  it("shows the devtools button until the panel opens, then restores it when closed", async () => {
+    render(<ClassicMainBody />);
+
+    const searchButton = screen.getByRole("button", { name: "Search" });
+    const newNoteButton = screen.getByRole("button", { name: "New note" });
+    const devtoolsButton = screen.getByRole("button", {
+      name: "Show devtools panel",
+    });
+
+    expect(searchButton.compareDocumentPosition(newNoteButton)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(newNoteButton.compareDocumentPosition(devtoolsButton)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(devtoolsButton.parentElement).toBe(newNoteButton.parentElement);
+
+    fireEvent.click(devtoolsButton);
+
+    expect(mocks.windowsCommands.devtoolsPanelShow).toHaveBeenCalledTimes(1);
+    expect(mocks.windowsCommands.devtoolsPanelHide).not.toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", { name: "Show devtools panel" }),
+      ).toBeNull();
+    });
+
+    act(() => {
+      for (const listener of mocks.devtoolsPanelActionListeners) {
+        listener({ payload: { action: "panel:closed" } });
+      }
+    });
+
+    expect(
+      await screen.findByRole("button", { name: "Show devtools panel" }),
+    ).toBeTruthy();
+  });
+
   it("routes wheel gestures from sidebar chrome into the timeline scroller", () => {
     render(<ClassicMainBody />);
 

apps/desktop/src/main/body.tsx

@@ -6,6 +6,7 @@ import {
   PanelLeftOpenIcon,
   SearchIcon,
   SquarePenIcon,
+  WrenchIcon,
 } from "lucide-react";
 import {
   type CSSProperties,
@@ -18,6 +19,10 @@ import {
   useState,
 } from "react";
 
+import {
+  commands as windowsCommands,
+  events as windowsEvents,
+} from "@hypr/plugin-windows";
 import {
   ResizableHandle,
   ResizablePanel,
@@ -38,6 +43,7 @@ import { useClassicMainTabsShortcuts } from "./useTabsShortcuts";
 import { useShell } from "~/contexts/shell";
 import { GlobalLiveTranscriptAccessory } from "~/session/components/bottom-accessory/global-live";
 import { scrollElementByWheel } from "~/shared/dom/scroll-wheel";
+import { useMountEffect } from "~/shared/hooks/useMountEffect";
 import { NOTE_SURFACE_MIN_WIDTH_PX } from "~/shared/main/layout-widths";
 import { useOpenNoteDialog } from "~/shared/open-note-dialog";
 import { useNewNote } from "~/shared/useNewNote";
@@ -54,6 +60,7 @@ const LEFT_SIDEBAR_DEFAULT_WIDTH_PX = 200;
 const LEFT_SIDEBAR_MIN_WIDTH_PX = 200;
 const LEFT_SIDEBAR_MAX_WIDTH_PX = 360;
 const LEFT_SIDEBAR_FALLBACK_CONTAINER_WIDTH_PX = 1000;
+const showDevtoolsPanelButton = import.meta.env.DEV;
 
 type MainAreaWindowDragStart = {
   pointerId: number;
@@ -81,6 +88,36 @@ export function ClassicMainBody() {
   const leftSidebarResizeDraggingRef = useRef(false);
   const [showIgnoredTimelineEvents, setShowIgnoredTimelineEvents] =
     useState(false);
+  const [devtoolsPanelOpen, setDevtoolsPanelOpen] = useState(false);
+
+  useMountEffect(() => {
+    if (!showDevtoolsPanelButton) {
+      return;
+    }
+
+    let cancelled = false;
+    let unlistenDevtoolsAction: (() => void) | undefined;
+
+    windowsEvents.devtoolsPanelAction
+      .listen(({ payload }) => {
+        if (payload.action === "panel:closed") {
+          setDevtoolsPanelOpen(false);
+        }
+      })
+      .then((unlisten) => {
+        if (cancelled) {
+          unlisten();
+          return;
+        }
+
+        unlistenDevtoolsAction = unlisten;
+      });
+
+    return () => {
+      cancelled = true;
+      unlistenDevtoolsAction?.();
+    };
+  });
 
   const isOnboarding = currentTab?.type === "onboarding";
   const isChangelog = currentTab?.type === "changelog";
@@ -117,6 +154,16 @@ export function ClassicMainBody() {
   const handleOpenNoteDialog = useCallback(() => {
     openNoteDialog.open();
   }, [openNoteDialog]);
+  const handleOpenDevtoolsPanel = useCallback(async () => {
+    const result = await windowsCommands.devtoolsPanelShow();
+
+    if (result.status === "ok") {
+      setDevtoolsPanelOpen(true);
+      return;
+    }
+
+    console.error("Failed to show devtools panel:", result.error);
+  }, []);
   const applyLeftSidebarPanelSize = useCallback((size: number) => {
     const bodyRoot = bodyRootRef.current;
     if (!bodyRoot) {
@@ -241,8 +288,10 @@ export function ClassicMainBody() {
           >
             <SidebarTimelineChrome
               sidebarExpanded={leftsidebar.expanded}
+              devtoolsPanelOpen={devtoolsPanelOpen}
               onNewNote={createNewNote}
               onSearch={handleOpenNoteDialog}
+              onOpenDevtools={handleOpenDevtoolsPanel}
               onToggleSidebar={handleToggleLeftSidebar}
               hasUpcomingMeeting={hasUpcomingMeetingBadge}
               update={update}
@@ -542,15 +591,19 @@ function isMainAreaWindowDrag(
 }
 
 function SidebarTimelineChrome({
+  devtoolsPanelOpen,
   hasUpcomingMeeting,
   onNewNote,
+  onOpenDevtools,
   onSearch,
   onToggleSidebar,
   sidebarExpanded,
   update,
 }: {
+  devtoolsPanelOpen: boolean;
   hasUpcomingMeeting: boolean;
   onNewNote: () => void;
+  onOpenDevtools: () => void;
   onSearch: () => void;
   onToggleSidebar: () => void;
   sidebarExpanded: boolean;
@@ -591,6 +644,14 @@ function SidebarTimelineChrome({
             <LeftSurfaceChromeButton ariaLabel="New note" onClick={onNewNote}>
               <SquarePenIcon size={15} />
             </LeftSurfaceChromeButton>
+            {showDevtoolsPanelButton && !devtoolsPanelOpen ? (
+              <LeftSurfaceChromeButton
+                ariaLabel="Show devtools panel"
+                onClick={onOpenDevtools}
+              >
+                <WrenchIcon size={15} />
+              </LeftSurfaceChromeButton>
+            ) : null}
           </>
         ) : null}
       </div>

apps/desktop/src/test-setup.ts

@@ -14,6 +14,19 @@ Object.defineProperty(globalThis.window, "__TAURI_INTERNALS__", {
         label: "main",
       },
     },
+    transformCallback: vi.fn((callback: unknown) => {
+      const callbackId = Math.trunc(Math.random() * Number.MAX_SAFE_INTEGER);
+      Object.assign(globalThis.window, {
+        [`_${callbackId}`]: callback,
+      });
+
+      return callbackId;
+    }),
+    unregisterCallback: vi.fn((callbackId: number) => {
+      delete (globalThis.window as unknown as Record<string, unknown>)[
+        `_${callbackId}`
+      ];
+    }),
     invoke: vi.fn().mockRejectedValue(new Error("not available in test")),
   },
   writable: true,

plugins/windows/swift-lib/src/DevtoolsPanelManager.swift

@@ -27,9 +27,9 @@ final class DevtoolsPanelManager {
 
       let panel = self.createPanel()
       let hostingView = NSHostingView(
-        rootView: DevtoolsPanelView { [weak self, weak panel] isCollapsed in
-          guard let panel else { return }
-          self?.resize(panel, isCollapsed: isCollapsed)
+        rootView: DevtoolsPanelView { [weak self] in
+          self?.hide()
+          RustBridge.devtoolsPanelAction("panel:closed")
         })
       hostingView.frame = NSRect(
         x: 0,
@@ -100,23 +100,6 @@ final class DevtoolsPanelManager {
     }
   }
 
-  private func resize(_ panel: NSPanel, isCollapsed: Bool) {
-    let height =
-      isCollapsed
-      ? DevtoolsPanelLayout.collapsedHeight
-      : DevtoolsPanelLayout.containerHeight
-    let size = NSSize(width: DevtoolsPanelLayout.containerWidth, height: height)
-    targetPanelSize = size
-    guard abs(panel.frame.height - height) > 0.5 else { return }
-
-    let frame = NSRect(
-      x: panel.frame.minX,
-      y: panel.frame.maxY - height,
-      width: size.width,
-      height: size.height)
-    placement.setFrame(panel, to: frame, display: true, animate: true)
-  }
-
   private func startFollowingActiveScreen() {
     guard followActiveScreenTimer == nil else { return }
 

plugins/windows/swift-lib/src/DevtoolsPanelView.swift

@@ -3,43 +3,34 @@ import SwiftUI
 enum DevtoolsPanelLayout {
   static let containerWidth: CGFloat = 300
   static let containerHeight: CGFloat = 560
-  static let collapsedHeight: CGFloat = 44
   static let screenMargin: CGFloat = 14
 }
 
 struct DevtoolsPanelView: View {
-  @State private var isCollapsed = false
+  private let onClose: () -> Void
 
-  private let onCollapseChange: (Bool) -> Void
-
-  init(onCollapseChange: @escaping (Bool) -> Void = { _ in }) {
-    self.onCollapseChange = onCollapseChange
+  init(onClose: @escaping () -> Void = {}) {
+    self.onClose = onClose
   }
 
   var body: some View {
     VStack(spacing: 0) {
       header
-      if !isCollapsed {
-        Divider()
-        ScrollView(showsIndicators: false) {
-          VStack(spacing: 10) {
-            navigationSection
-            toastsSection
-            otaSection
-            notificationsSection
-            billingSection
-            countdownSection
-            errorSection
-          }
-          .padding(10)
+      Divider()
+      ScrollView(showsIndicators: false) {
+        VStack(spacing: 10) {
+          navigationSection
+          toastsSection
+          otaSection
+          notificationsSection
+          billingSection
+          countdownSection
+          errorSection
         }
+        .padding(10)
       }
     }
-    .frame(
-      width: DevtoolsPanelLayout.containerWidth,
-      height: isCollapsed
-        ? DevtoolsPanelLayout.collapsedHeight : DevtoolsPanelLayout.containerHeight
-    )
+    .frame(width: DevtoolsPanelLayout.containerWidth, height: DevtoolsPanelLayout.containerHeight)
     .background(
       RoundedRectangle(cornerRadius: 12, style: .continuous)
         .fill(Color(nsColor: .windowBackgroundColor).opacity(0.96))
@@ -57,13 +48,9 @@ struct DevtoolsPanelView: View {
         .foregroundStyle(.primary)
       Spacer()
       Button {
-        let nextIsCollapsed = !isCollapsed
-        withAnimation(.easeInOut(duration: 0.16)) {
-          isCollapsed = nextIsCollapsed
-        }
-        onCollapseChange(nextIsCollapsed)
+        onClose()
       } label: {
-        Image(systemName: isCollapsed ? "chevron.down" : "chevron.up")
+        Image(systemName: "xmark")
           .font(.system(size: 11, weight: .bold))
           .foregroundStyle(.secondary)
           .frame(width: 24, height: 22)
@@ -74,7 +61,7 @@ struct DevtoolsPanelView: View {
           .contentShape(Rectangle())
       }
       .buttonStyle(.plain)
-      .accessibilityLabel(isCollapsed ? "Expand devtools" : "Collapse devtools")
+      .accessibilityLabel("Close devtools")
     }
     .padding(.horizontal, 12)
     .padding(.vertical, 10)