From d2ad1aabe09662162297f83abf77e10eb8eb195e Mon Sep 17 00:00:00 2001
From: Wes <wesb@block.xyz>
Date: Fri, 8 May 2026 09:19:38 -0700
Subject: [PATCH 1/2] fix(desktop): clean up channel management sidebar layout
 and UX

- Remove redundant section labels ("Details", "Topic and Purpose", etc.)
- Fix member count to use actual members query data
- Move canvas section to top of sidebar
- Convert topic/purpose to single-line inputs
- Move leave button to bottom row: [Leave] [Archive] [spacer] [Delete]
- Move create workflow button from top bar into sidebar
- Remove redundant section descriptions throughout
- Right-align delete button in danger zone row

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../channels/ui/ChannelManagementSheet.tsx    | 563 ++++++++----------
 .../channels/ui/ChannelMembersBar.tsx         |  26 +-
 2 files changed, 258 insertions(+), 331 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelManagementSheet.tsx b/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
index 6685fb580..94fe032c9 100644
--- a/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
+++ b/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
@@ -8,6 +8,7 @@ import {
   Lock,
   MessageSquare,
   Users,
+  Zap,
 } from "lucide-react";
 import * as React from "react";
 
@@ -24,6 +25,7 @@ import {
   useUpdateChannelMutation,
 } from "@/features/channels/hooks";
 import { compareMembersByRole } from "@/features/channels/lib/memberUtils";
+import { CreateWorkflowDialog } from "@/features/workflows/ui/CreateWorkflowDialog";
 import type { Channel } from "@/shared/api/types";
 import {
   AlertDialog,
@@ -56,27 +58,6 @@ type ChannelManagementSheetProps = {
   open: boolean;
 };
 
-function Section({
-  title,
-  description,
-  children,
-}: React.PropsWithChildren<{
-  title: string;
-  description?: string;
-}>) {
-  return (
-    <section className="space-y-3">
-      <div className="space-y-1">
-        <h2 className="text-sm font-semibold tracking-tight">{title}</h2>
-        {description ? (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        ) : null}
-      </div>
-      {children}
-    </section>
-  );
-}
-
 function MetadataPill({
   icon: Icon,
   label,
@@ -138,17 +119,15 @@ export function ChannelManagementSheet({
     detail?.channelType !== "dm" &&
     !isArchived &&
     selfMember !== null;
-  const showAccessSection =
-    canJoin ||
-    canLeave ||
-    joinChannelMutation.error instanceof Error ||
-    leaveChannelMutation.error instanceof Error;
+  const memberCount =
+    members.length || detail?.memberCount || channel?.memberCount || 0;
 
   const [nameDraft, setNameDraft] = React.useState("");
   const [descriptionDraft, setDescriptionDraft] = React.useState("");
   const [topicDraft, setTopicDraft] = React.useState("");
   const [purposeDraft, setPurposeDraft] = React.useState("");
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
+  const [isCreateWorkflowOpen, setIsCreateWorkflowOpen] = React.useState(false);
 
   // Sync drafts from server only when the sheet opens or the channel changes —
   // not on every background refetch, which would clobber in-flight edits.
@@ -158,6 +137,7 @@ export function ChannelManagementSheet({
       // Reset on close so the next open re-syncs from server.
       syncedForRef.current = null;
       setIsDeleteDialogOpen(false);
+      setIsCreateWorkflowOpen(false);
       return;
     }
     if (!detail) {
@@ -214,13 +194,11 @@ export function ChannelManagementSheet({
         side="right"
       >
         <SheetHeader className="relative z-10 space-y-4 bg-background/25 px-6 py-6 text-left shadow-[0_4px_24px_rgba(0,0,0,0.06)] backdrop-blur-xl supports-[backdrop-filter]:bg-background/20 dark:shadow-[0_4px_24px_rgba(0,0,0,0.25)]">
-          <div className="space-y-2">
-            <SheetTitle className="pr-8">{channel.name}</SheetTitle>
-            <SheetDescription>
-              Manage channel settings, membership, and access.
-            </SheetDescription>
-          </div>
-          <div className="flex flex-wrap gap-2">
+          <SheetTitle className="pr-8">{channel.name}</SheetTitle>
+          <SheetDescription className="sr-only">
+            Channel settings
+          </SheetDescription>
+          <div className="flex flex-wrap items-center gap-2">
             <MetadataPill
               icon={
                 channel.channelType === "forum"
@@ -235,10 +213,7 @@ export function ChannelManagementSheet({
               icon={channel.visibility === "private" ? Lock : DoorOpen}
               label={channel.visibility}
             />
-            <MetadataPill
-              icon={Users}
-              label={`${resolvedChannel.memberCount} members`}
-            />
+            <MetadataPill icon={Users} label={`${memberCount} members`} />
             {isArchived ? (
               <MetadataPill icon={Archive} label="archived" />
             ) : null}
@@ -258,29 +233,177 @@ export function ChannelManagementSheet({
             </p>
           ) : null}
 
-          {showAccessSection ? (
-            <Section
-              description="Open channels stay visible to everyone. Private channels require an invite."
-              title="Access"
+          {canJoin ? (
+            <div className="space-y-3">
+              <Button
+                data-testid="channel-management-join"
+                disabled={joinChannelMutation.isPending}
+                onClick={() => {
+                  void joinChannelMutation.mutateAsync();
+                }}
+                size="sm"
+                type="button"
+              >
+                <DoorOpen className="h-4 w-4" />
+                {joinChannelMutation.isPending ? "Joining..." : "Join channel"}
+              </Button>
+              {joinChannelMutation.error instanceof Error ? (
+                <p className="text-sm text-destructive">
+                  {joinChannelMutation.error.message}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
+          <ChannelCanvas
+            canEdit={canEditNarrative}
+            channelId={channelId}
+            isArchived={isArchived}
+          />
+
+          <form
+            className="space-y-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void updateChannelMutation.mutateAsync({
+                description: descriptionDraft.trim() || undefined,
+                name: nameDraft.trim() || undefined,
+              });
+            }}
+          >
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium" htmlFor="channel-name">
+                Name
+              </label>
+              <Input
+                data-testid="channel-management-name"
+                disabled={!canManageChannel || updateChannelMutation.isPending}
+                id="channel-name"
+                onChange={(event) => setNameDraft(event.target.value)}
+                value={nameDraft}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label
+                className="text-sm font-medium"
+                htmlFor="channel-description"
+              >
+                Description
+              </label>
+              <Textarea
+                className="min-h-24"
+                data-testid="channel-management-description"
+                disabled={!canManageChannel || updateChannelMutation.isPending}
+                id="channel-description"
+                onChange={(event) => setDescriptionDraft(event.target.value)}
+                value={descriptionDraft}
+              />
+            </div>
+            <Button
+              data-testid="channel-management-save-details"
+              disabled={!canManageChannel || updateChannelMutation.isPending}
+              size="sm"
+              type="submit"
             >
-              <div className="flex flex-wrap gap-2">
-                {canJoin ? (
-                  <Button
-                    data-testid="channel-management-join"
-                    disabled={joinChannelMutation.isPending}
-                    onClick={() => {
-                      void joinChannelMutation.mutateAsync();
-                    }}
-                    size="sm"
-                    type="button"
-                  >
-                    <DoorOpen className="h-4 w-4" />
-                    {joinChannelMutation.isPending
-                      ? "Joining..."
-                      : "Join channel"}
-                  </Button>
-                ) : null}
+              {updateChannelMutation.isPending ? "Saving..." : "Save details"}
+            </Button>
+            {updateChannelMutation.error instanceof Error ? (
+              <p className="text-sm text-destructive">
+                {updateChannelMutation.error.message}
+              </p>
+            ) : null}
+          </form>
 
+          <form
+            className="space-y-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void setTopicMutation.mutateAsync({
+                topic: topicDraft.trim(),
+              });
+            }}
+          >
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium" htmlFor="channel-topic">
+                Topic
+              </label>
+              <Input
+                data-testid="channel-management-topic"
+                disabled={!canEditNarrative || setTopicMutation.isPending}
+                id="channel-topic"
+                onChange={(event) => setTopicDraft(event.target.value)}
+                value={topicDraft}
+              />
+            </div>
+            <Button
+              data-testid="channel-management-save-topic"
+              disabled={!canEditNarrative || setTopicMutation.isPending}
+              size="sm"
+              type="submit"
+              variant="outline"
+            >
+              {setTopicMutation.isPending ? "Saving..." : "Save topic"}
+            </Button>
+            {setTopicMutation.error instanceof Error ? (
+              <p className="text-sm text-destructive">
+                {setTopicMutation.error.message}
+              </p>
+            ) : null}
+          </form>
+
+          <form
+            className="space-y-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void setPurposeMutation.mutateAsync({
+                purpose: purposeDraft.trim(),
+              });
+            }}
+          >
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium" htmlFor="channel-purpose">
+                Purpose
+              </label>
+              <Input
+                data-testid="channel-management-purpose"
+                disabled={!canEditNarrative || setPurposeMutation.isPending}
+                id="channel-purpose"
+                onChange={(event) => setPurposeDraft(event.target.value)}
+                value={purposeDraft}
+              />
+            </div>
+            <Button
+              data-testid="channel-management-save-purpose"
+              disabled={!canEditNarrative || setPurposeMutation.isPending}
+              size="sm"
+              type="submit"
+              variant="outline"
+            >
+              {setPurposeMutation.isPending ? "Saving..." : "Save purpose"}
+            </Button>
+            {setPurposeMutation.error instanceof Error ? (
+              <p className="text-sm text-destructive">
+                {setPurposeMutation.error.message}
+              </p>
+            ) : null}
+          </form>
+
+          {canEditNarrative ? (
+            <Button
+              data-testid="channel-management-create-workflow"
+              onClick={() => setIsCreateWorkflowOpen(true)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <Zap className="h-4 w-4" />
+              Create workflow
+            </Button>
+          ) : null}
+
+          {resolvedChannel.channelType !== "dm" ? (
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
                 {canLeave ? (
                   <Button
                     data-testid="channel-management-leave"
@@ -295,187 +418,9 @@ export function ChannelManagementSheet({
                     variant="outline"
                   >
                     <DoorClosed className="h-4 w-4" />
-                    {leaveChannelMutation.isPending
-                      ? "Leaving..."
-                      : "Leave channel"}
+                    {leaveChannelMutation.isPending ? "Leaving..." : "Leave"}
                   </Button>
                 ) : null}
-              </div>
-              {joinChannelMutation.error instanceof Error ? (
-                <p className="text-sm text-destructive">
-                  {joinChannelMutation.error.message}
-                </p>
-              ) : null}
-              {leaveChannelMutation.error instanceof Error ? (
-                <p className="text-sm text-destructive">
-                  {leaveChannelMutation.error.message}
-                </p>
-              ) : null}
-            </Section>
-          ) : null}
-
-          <Section
-            description="A shared Markdown document for the channel."
-            title="Canvas"
-          >
-            <ChannelCanvas
-              canEdit={canEditNarrative}
-              channelId={channelId}
-              isArchived={isArchived}
-            />
-          </Section>
-
-          <Section
-            description="Topic and purpose show the current context for the channel."
-            title="Context"
-          >
-            <form
-              className="space-y-3"
-              onSubmit={(event) => {
-                event.preventDefault();
-                void setTopicMutation.mutateAsync({
-                  topic: topicDraft.trim(),
-                });
-              }}
-            >
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium" htmlFor="channel-topic">
-                  Topic
-                </label>
-                <Input
-                  data-testid="channel-management-topic"
-                  disabled={!canEditNarrative || setTopicMutation.isPending}
-                  id="channel-topic"
-                  onChange={(event) => setTopicDraft(event.target.value)}
-                  value={topicDraft}
-                />
-              </div>
-              <Button
-                data-testid="channel-management-save-topic"
-                disabled={!canEditNarrative || setTopicMutation.isPending}
-                size="sm"
-                type="submit"
-                variant="outline"
-              >
-                {setTopicMutation.isPending ? "Saving..." : "Save topic"}
-              </Button>
-              {setTopicMutation.error instanceof Error ? (
-                <p className="text-sm text-destructive">
-                  {setTopicMutation.error.message}
-                </p>
-              ) : null}
-            </form>
-
-            <form
-              className="space-y-3"
-              onSubmit={(event) => {
-                event.preventDefault();
-                void setPurposeMutation.mutateAsync({
-                  purpose: purposeDraft.trim(),
-                });
-              }}
-            >
-              <div className="space-y-1.5">
-                <label
-                  className="text-sm font-medium"
-                  htmlFor="channel-purpose"
-                >
-                  Purpose
-                </label>
-                <Textarea
-                  className="min-h-24"
-                  data-testid="channel-management-purpose"
-                  disabled={!canEditNarrative || setPurposeMutation.isPending}
-                  id="channel-purpose"
-                  onChange={(event) => setPurposeDraft(event.target.value)}
-                  value={purposeDraft}
-                />
-              </div>
-              <Button
-                data-testid="channel-management-save-purpose"
-                disabled={!canEditNarrative || setPurposeMutation.isPending}
-                size="sm"
-                type="submit"
-                variant="outline"
-              >
-                {setPurposeMutation.isPending ? "Saving..." : "Save purpose"}
-              </Button>
-              {setPurposeMutation.error instanceof Error ? (
-                <p className="text-sm text-destructive">
-                  {setPurposeMutation.error.message}
-                </p>
-              ) : null}
-            </form>
-          </Section>
-
-          <Section
-            description="Name and description are owner/admin actions."
-            title="Details"
-          >
-            <form
-              className="space-y-3"
-              onSubmit={(event) => {
-                event.preventDefault();
-                void updateChannelMutation.mutateAsync({
-                  description: descriptionDraft.trim() || undefined,
-                  name: nameDraft.trim() || undefined,
-                });
-              }}
-            >
-              <div className="space-y-1.5">
-                <label className="text-sm font-medium" htmlFor="channel-name">
-                  Name
-                </label>
-                <Input
-                  data-testid="channel-management-name"
-                  disabled={
-                    !canManageChannel || updateChannelMutation.isPending
-                  }
-                  id="channel-name"
-                  onChange={(event) => setNameDraft(event.target.value)}
-                  value={nameDraft}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label
-                  className="text-sm font-medium"
-                  htmlFor="channel-description"
-                >
-                  Description
-                </label>
-                <Textarea
-                  className="min-h-24"
-                  data-testid="channel-management-description"
-                  disabled={
-                    !canManageChannel || updateChannelMutation.isPending
-                  }
-                  id="channel-description"
-                  onChange={(event) => setDescriptionDraft(event.target.value)}
-                  value={descriptionDraft}
-                />
-              </div>
-              <Button
-                data-testid="channel-management-save-details"
-                disabled={!canManageChannel || updateChannelMutation.isPending}
-                size="sm"
-                type="submit"
-              >
-                {updateChannelMutation.isPending ? "Saving..." : "Save details"}
-              </Button>
-              {updateChannelMutation.error instanceof Error ? (
-                <p className="text-sm text-destructive">
-                  {updateChannelMutation.error.message}
-                </p>
-              ) : null}
-            </form>
-          </Section>
-
-          {resolvedChannel.channelType !== "dm" ? (
-            <Section
-              description="Archiving keeps history but blocks new changes."
-              title="Channel state"
-            >
-              <div className="flex flex-wrap gap-2">
                 {isArchived ? (
                   <Button
                     data-testid="channel-management-unarchive"
@@ -491,7 +436,7 @@ export function ChannelManagementSheet({
                     <ArchiveRestore className="h-4 w-4" />
                     {unarchiveChannelMutation.isPending
                       ? "Restoring..."
-                      : "Unarchive channel"}
+                      : "Unarchive"}
                   </Button>
                 ) : (
                   <Button
@@ -509,10 +454,76 @@ export function ChannelManagementSheet({
                     <Archive className="h-4 w-4" />
                     {archiveChannelMutation.isPending
                       ? "Archiving..."
-                      : "Archive channel"}
+                      : "Archive"}
                   </Button>
                 )}
+                <div className="flex-1" />
+                {isOwner ? (
+                  <AlertDialog
+                    onOpenChange={handleDeleteDialogOpenChange}
+                    open={isDeleteDialogOpen}
+                  >
+                    <AlertDialogTrigger asChild>
+                      <Button
+                        data-testid="channel-management-delete"
+                        disabled={deleteChannelMutation.isPending}
+                        size="sm"
+                        type="button"
+                        variant="destructive"
+                      >
+                        Delete
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent data-testid="channel-delete-confirmation-dialog">
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Delete channel?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Delete {resolvedChannel.name} from the workspace list.
+                          This action cannot be undone.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      {deleteChannelMutation.error instanceof Error ? (
+                        <p className="text-sm text-destructive">
+                          {deleteChannelMutation.error.message}
+                        </p>
+                      ) : null}
+                      <AlertDialogFooter>
+                        <AlertDialogCancel asChild>
+                          <Button
+                            data-testid="channel-delete-cancel"
+                            disabled={deleteChannelMutation.isPending}
+                            type="button"
+                            variant="outline"
+                          >
+                            Cancel
+                          </Button>
+                        </AlertDialogCancel>
+                        <AlertDialogAction asChild>
+                          <Button
+                            data-testid="channel-delete-confirm"
+                            disabled={deleteChannelMutation.isPending}
+                            onClick={(event) => {
+                              event.preventDefault();
+                              void handleDeleteChannel();
+                            }}
+                            type="button"
+                            variant="destructive"
+                          >
+                            {deleteChannelMutation.isPending
+                              ? "Deleting..."
+                              : "Delete channel"}
+                          </Button>
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                ) : null}
               </div>
+              {leaveChannelMutation.error instanceof Error ? (
+                <p className="text-sm text-destructive">
+                  {leaveChannelMutation.error.message}
+                </p>
+              ) : null}
               {archiveChannelMutation.error instanceof Error ? (
                 <p className="text-sm text-destructive">
                   {archiveChannelMutation.error.message}
@@ -523,76 +534,16 @@ export function ChannelManagementSheet({
                   {unarchiveChannelMutation.error.message}
                 </p>
               ) : null}
-            </Section>
-          ) : null}
-
-          {isOwner && resolvedChannel.channelType !== "dm" ? (
-            <Section
-              description="Deleting removes the channel from the workspace list."
-              title="Danger zone"
-            >
-              <AlertDialog
-                onOpenChange={handleDeleteDialogOpenChange}
-                open={isDeleteDialogOpen}
-              >
-                <AlertDialogTrigger asChild>
-                  <Button
-                    data-testid="channel-management-delete"
-                    disabled={deleteChannelMutation.isPending}
-                    size="sm"
-                    type="button"
-                    variant="destructive"
-                  >
-                    Delete channel
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent data-testid="channel-delete-confirmation-dialog">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Delete channel?</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      Delete {resolvedChannel.name} from the workspace list.
-                      This action cannot be undone.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  {deleteChannelMutation.error instanceof Error ? (
-                    <p className="text-sm text-destructive">
-                      {deleteChannelMutation.error.message}
-                    </p>
-                  ) : null}
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button
-                        data-testid="channel-delete-cancel"
-                        disabled={deleteChannelMutation.isPending}
-                        type="button"
-                        variant="outline"
-                      >
-                        Cancel
-                      </Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button
-                        data-testid="channel-delete-confirm"
-                        disabled={deleteChannelMutation.isPending}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          void handleDeleteChannel();
-                        }}
-                        type="button"
-                        variant="destructive"
-                      >
-                        {deleteChannelMutation.isPending
-                          ? "Deleting..."
-                          : "Delete channel"}
-                      </Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </Section>
+            </div>
           ) : null}
         </div>
       </SheetContent>
+
+      <CreateWorkflowDialog
+        channels={[channel]}
+        onOpenChange={setIsCreateWorkflowOpen}
+        open={isCreateWorkflowOpen}
+      />
     </Sheet>
   );
 }
diff --git a/desktop/src/features/channels/ui/ChannelMembersBar.tsx b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
index 289250803..2c5620c8b 100644
--- a/desktop/src/features/channels/ui/ChannelMembersBar.tsx
+++ b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
@@ -1,4 +1,4 @@
-import { Plus, Settings2, Users, Zap } from "lucide-react";
+import { Plus, Settings2, Users } from "lucide-react";
 import * as React from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useHuddle } from "@/features/huddle";
@@ -10,7 +10,6 @@ import {
   useRelayAgentsQuery,
 } from "@/features/agents/hooks";
 import { useChannelMembersQuery } from "@/features/channels/hooks";
-import { CreateWorkflowDialog } from "@/features/workflows/ui/CreateWorkflowDialog";
 import type { Channel } from "@/shared/api/types";
 import { normalizePubkey } from "@/shared/lib/pubkey";
 import { Button } from "@/shared/ui/button";
@@ -30,7 +29,6 @@ export function ChannelMembersBar({
   onToggleMembers,
 }: ChannelMembersBarProps) {
   const [isAddBotOpen, setIsAddBotOpen] = React.useState(false);
-  const [isCreateWorkflowOpen, setIsCreateWorkflowOpen] = React.useState(false);
   const { startHuddle, isStarting: isStartingHuddle } = useHuddle();
   const queryClient = useQueryClient();
   const membersQuery = useChannelMembersQuery(channel.id);
@@ -75,7 +73,6 @@ export function ChannelMembersBar({
 
     previousChannelIdRef.current = channel.id;
     setIsAddBotOpen(false);
-    setIsCreateWorkflowOpen(false);
   }, [channel.id]);
 
   const dialogErrorMessage =
@@ -105,21 +102,6 @@ export function ChannelMembersBar({
           <Plus className="h-4 w-4" />
         </Button>
 
-        <Button
-          aria-label="Create workflow"
-          className="h-9 w-9 rounded-full"
-          data-testid="channel-create-workflow-trigger"
-          disabled={!canAddAgents}
-          onClick={() => {
-            setIsCreateWorkflowOpen(true);
-          }}
-          size="icon"
-          type="button"
-          variant="outline"
-        >
-          <Zap className="h-4 w-4" />
-        </Button>
-
         <HuddleIndicator
           channelId={channel.id}
           onStart={async () => {
@@ -162,12 +144,6 @@ export function ChannelMembersBar({
         </Button>
       </div>
 
-      <CreateWorkflowDialog
-        channels={[channel]}
-        onOpenChange={setIsCreateWorkflowOpen}
-        open={isCreateWorkflowOpen}
-      />
-
       <AddChannelBotDialog
         backendProviders={backendProvidersQuery.data ?? []}
         backendProvidersLoading={backendProvidersQuery.isLoading}

From 8ed247472778ce3a946845fadb093b8e957e3309 Mon Sep 17 00:00:00 2001
From: Wes <wesb@block.xyz>
Date: Fri, 8 May 2026 09:41:54 -0700
Subject: [PATCH 2/2] fix(desktop): update canvas position e2e test for new
 sidebar layout

The manage channel sidebar no longer uses section headings, so the test
that verified canvas placement by checking section h2 order now fails.
Replace with a bounding-box assertion that canvas content renders above
the name input.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../channels/ui/ChannelManagementSheet.tsx    | 12 +++++----
 desktop/tests/e2e/channels.spec.ts            | 26 +++++++++----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelManagementSheet.tsx b/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
index 94fe032c9..e2cf3e29f 100644
--- a/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
+++ b/desktop/src/features/channels/ui/ChannelManagementSheet.tsx
@@ -255,11 +255,13 @@ export function ChannelManagementSheet({
             </div>
           ) : null}
 
-          <ChannelCanvas
-            canEdit={canEditNarrative}
-            channelId={channelId}
-            isArchived={isArchived}
-          />
+          <div data-testid="channel-canvas-section">
+            <ChannelCanvas
+              canEdit={canEditNarrative}
+              channelId={channelId}
+              isArchived={isArchived}
+            />
+          </div>
 
           <form
             className="space-y-3"
diff --git a/desktop/tests/e2e/channels.spec.ts b/desktop/tests/e2e/channels.spec.ts
index f8f028a37..ebf56bb9a 100644
--- a/desktop/tests/e2e/channels.spec.ts
+++ b/desktop/tests/e2e/channels.spec.ts
@@ -773,19 +773,19 @@ test("manage channel keeps canvas near the top of the sheet", async ({
   await page.goto("/");
   await openChannelManagement(page, "general");
 
-  const sectionHeadings = await page
-    .getByTestId("channel-management-sheet")
-    .locator("section h2")
-    .allTextContents();
-
-  expect(sectionHeadings).toEqual([
-    "Access",
-    "Canvas",
-    "Context",
-    "Details",
-    "Channel state",
-    "Danger zone",
-  ]);
+  const sheet = page.getByTestId("channel-management-sheet");
+
+  // Canvas section should appear before the name input in the DOM.
+  const canvasBox = await sheet
+    .getByTestId("channel-canvas-section")
+    .boundingBox();
+  const nameBox = await sheet
+    .getByTestId("channel-management-name")
+    .boundingBox();
+
+  expect(canvasBox).not.toBeNull();
+  expect(nameBox).not.toBeNull();
+  expect(canvasBox?.y).toBeLessThan(nameBox?.y);
 });
 
 test("members sidebar can invite and remove members", async ({ page }) => {