diff --git a/apps/aevatar-console-web/src/app.navigation.test.ts b/apps/aevatar-console-web/src/app.navigation.test.ts
index d0595481fa..8f010c05cb 100644
--- a/apps/aevatar-console-web/src/app.navigation.test.ts
+++ b/apps/aevatar-console-web/src/app.navigation.test.ts
@@ -21,8 +21,9 @@ describe("app navigation groups", () => {
     jest.resetModules();
   });
 
-  it("places Chat as a top-level navigation group below Teams", () => {
+  it("places Chat as a top-level navigation item below Teams", () => {
     const groups = loadNavigationGroups();
+    const chatGroup = groups.find((group) => group.key === "chat");
 
     expect(groups.map((group) => group.label)).toEqual([
       "Teams",
@@ -36,8 +37,8 @@ describe("app navigation groups", () => {
       "nav.groups.platform",
       "nav.groups.settings",
     ]);
-    expect(groups.find((group) => group.key === "chat")?.flattenSingleItem).toBe(true);
-    expect(groups.find((group) => group.key === "chat")?.flattenSingleItemAsGroupLabel).toBe(true);
+    expect(chatGroup?.flattenSingleItem).toBe(true);
+    expect(chatGroup?.icon).toBeTruthy();
     expect(groups.find((group) => group.key === "teams")?.flattenSingleItem).toBeUndefined();
   });
 
@@ -73,7 +74,7 @@ describe("app navigation groups", () => {
         },
       ],
       groups,
-      (group) => group.label,
+      (group) => `Group:${group.label}`,
     );
 
     expect(menuItems.map((item) => item.path ?? item.key)).toEqual([
@@ -85,5 +86,13 @@ describe("app navigation groups", () => {
     expect(menuItems[0].children?.map((child) => child.path)).toEqual([
       "/scopes",
     ]);
+    expect(menuItems[0].name).toBe("Group:Teams");
+    expect(menuItems[1]).toMatchObject({
+      menuGroupKey: "chat",
+      name: "Chat",
+      path: "/chat",
+    });
+    expect(menuItems[1].icon).toBeTruthy();
+    expect(menuItems[2].name).toBe("Group:Platform");
   });
 });
diff --git a/apps/aevatar-console-web/src/global.less b/apps/aevatar-console-web/src/global.less
index 9499e85ac4..f00b0b4b15 100644
--- a/apps/aevatar-console-web/src/global.less
+++ b/apps/aevatar-console-web/src/global.less
@@ -153,62 +153,6 @@ body,
   margin: 0;
 }
 
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"] {
-  position: relative;
-  width: calc(100% - 20px);
-  height: 34px;
-  margin: 10px 10px 12px !important;
-  padding: 0 0 12px !important;
-  line-height: 22px;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
-  border-radius: 0;
-}
-
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"]::after {
-  display: none;
-}
-
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"]:hover,
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"].ant-menu-item-selected {
-  background: transparent !important;
-}
-
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"]
-  .ant-pro-base-menu-inline-item-text {
-  color: #667085;
-  font-weight: 700;
-}
-
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"].ant-menu-item-selected
-  .ant-pro-base-menu-inline-item-text {
-  color: #344054;
-}
-
-.ant-pro-sider
-  .ant-menu-inline:not(.ant-menu-inline-collapsed)
-  .ant-menu-item[data-menu-id$="/chat"].ant-menu-item-selected::before {
-  position: absolute;
-  top: 2px;
-  bottom: 14px;
-  left: -8px;
-  width: 3px;
-  background: #1677ff;
-  border-radius: 999px;
-  content: "";
-}
-
 .ant-pro-sider .ant-menu-inline .ant-menu-item-divider,
 .ant-pro-sider .ant-menu-inline .ant-pro-base-menu-inline-divider {
   margin: 10px 10px 12px !important;
diff --git a/apps/aevatar-console-web/src/locales/en-US.ts b/apps/aevatar-console-web/src/locales/en-US.ts
index 19e62ac14b..ed982255eb 100644
--- a/apps/aevatar-console-web/src/locales/en-US.ts
+++ b/apps/aevatar-console-web/src/locales/en-US.ts
@@ -1162,7 +1162,7 @@ const enUSMessages = {
   'teamMemberWorkflowStudio.header.publish.publishingStatus': 'Publishing',
   'teamMemberWorkflowStudio.header.publishMember': 'Publish member workflow',
   'teamMemberWorkflowStudio.header.publishMemberShort': 'Publish member',
-  'teamMemberWorkflowStudio.header.teamBreadcrumb': 'Team',
+  'teamMemberWorkflowStudio.header.teamBreadcrumb': 'Teams',
   'teamMemberWorkflowStudio.header.unsavedChanges': 'Unsaved changes',
   'teamMemberWorkflowStudio.header.viewsAria': 'Workflow views',
   'teamMemberWorkflowStudio.header.workflowTitleAria': 'Workflow title',
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx
index 7002531f45..6bddaa21d2 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx
@@ -21,6 +21,7 @@ type WorkflowStudioCanvasProps = {
   readonly onNodeSelect?: (nodeId: string) => void;
   readonly selectedEdgeId?: string;
   readonly selectedNodeId?: string;
+  readonly viewportRightInset?: number;
 };
 
 const WorkflowStudioCanvas: React.FC<WorkflowStudioCanvasProps> = ({
@@ -37,6 +38,7 @@ const WorkflowStudioCanvas: React.FC<WorkflowStudioCanvasProps> = ({
   onNodeSelect,
   selectedEdgeId,
   selectedNodeId,
+  viewportRightInset,
 }) => (
   <div
     data-testid="workflow-studio-canvas"
@@ -74,6 +76,7 @@ const WorkflowStudioCanvas: React.FC<WorkflowStudioCanvasProps> = ({
       selectedEdgeId={selectedEdgeId}
       selectedNodeId={selectedNodeId}
       variant="studio"
+      viewportRightInset={viewportRightInset}
     />
   </div>
 );
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioHeader.tsx b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioHeader.tsx
index e06b112d71..9036a5c330 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioHeader.tsx
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioHeader.tsx
@@ -91,13 +91,13 @@ const workflowStudioHeaderCss = `
 
 .workflow-studio-header__identity {
   align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  grid-template-rows: auto auto;
   min-width: 0;
   overflow: visible;
-  row-gap: 6px;
-  white-space: normal;
+  row-gap: 2px;
 }
 
 .workflow-studio-header__back-button {
@@ -106,6 +106,8 @@ const workflowStudioHeaderCss = `
   color: #374151;
   display: inline-flex;
   flex: 0 0 auto;
+  grid-column: 1;
+  grid-row: 2;
   height: 30px;
   justify-content: center;
   width: 30px;
@@ -119,34 +121,46 @@ const workflowStudioHeaderCss = `
 .workflow-studio-header__title-zone {
   align-items: center;
   display: flex;
-  flex: 1 1 280px;
   gap: 8px;
+  grid-column: 2;
+  grid-row: 2;
   max-width: 100%;
   min-width: 0;
+  overflow: hidden;
 }
 
 .workflow-studio-header__breadcrumbs {
   align-items: center;
   color: #6b7280;
   display: inline-flex;
-  flex: 0 1 auto;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   gap: 6px;
+  grid-column: 2;
+  grid-row: 1;
   min-width: 0;
   overflow: hidden;
+  padding-inline-start: 7px;
 }
 
 .workflow-studio-header__breadcrumb-link {
   color: #6b7280;
   display: inline-block;
-  max-width: 140px;
+  min-width: 0;
   overflow: hidden;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.workflow-studio-header__breadcrumb-link:first-child {
+  flex: 0 0 auto;
+}
+
+.workflow-studio-header__breadcrumb-link:last-child {
+  flex: 0 1 auto;
+}
+
 .workflow-studio-header__breadcrumb-link:hover {
   color: #111827;
 }
@@ -156,13 +170,6 @@ const workflowStudioHeaderCss = `
   flex: 0 0 auto;
 }
 
-.workflow-studio-header__title-divider {
-  background: #d1d5db;
-  flex: 0 0 auto;
-  height: 18px;
-  width: 1px;
-}
-
 .workflow-studio-header__title-shell {
   align-items: center;
   background: transparent;
@@ -171,7 +178,7 @@ const workflowStudioHeaderCss = `
   display: inline-flex;
   flex: 1 1 180px;
   gap: 4px;
-  max-width: min(360px, 100%);
+  max-width: min(480px, 100%);
   min-width: 0;
   padding: 0 2px 0 6px;
 }
@@ -195,11 +202,8 @@ const workflowStudioHeaderCss = `
   font-weight: 700;
   height: 28px;
   line-height: 24px;
-  padding: 0;
-}
-
-.workflow-studio-header__title-input input {
   overflow: hidden;
+  padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -217,7 +221,8 @@ const workflowStudioHeaderCss = `
 }
 
 .workflow-studio-header__title-shell:hover .workflow-studio-header__edit-button,
-.workflow-studio-header__title-shell--focused .workflow-studio-header__edit-button {
+.workflow-studio-header__title-shell--focused .workflow-studio-header__edit-button,
+.workflow-studio-header__edit-button:focus-visible {
   opacity: 1;
 }
 
@@ -225,8 +230,8 @@ const workflowStudioHeaderCss = `
   align-items: center;
   border: 0;
   display: inline-flex;
-  flex: 0 1 auto;
-  flex-wrap: wrap;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
   gap: 6px;
   margin: 0;
   min-inline-size: 0;
@@ -251,7 +256,7 @@ const workflowStudioHeaderCss = `
 .workflow-studio-header__actions {
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 4px;
   justify-content: flex-end;
   max-width: 100%;
@@ -293,27 +298,12 @@ const workflowStudioHeaderCss = `
   width: 30px;
 }
 
-@media (max-width: 1320px) {
-  .workflow-studio-header__breadcrumbs {
-    display: none;
-  }
-
-  .workflow-studio-header__title-divider {
-    display: none;
-  }
-
-  .workflow-studio-header__title-shell {
-    max-width: 320px;
-  }
-
-  .workflow-studio-header__action-label--secondary {
-    display: none;
-  }
-
-  .workflow-studio-header__compact-button {
-    min-width: 34px;
-    padding-inline: 8px;
-  }
+.workflow-studio-header__action-divider {
+  background: #e5e7eb;
+  flex: 0 0 auto;
+  height: 20px;
+  margin-inline: 4px;
+  width: 1px;
 }
 
 @media (max-width: 980px) {
@@ -323,6 +313,7 @@ const workflowStudioHeaderCss = `
   }
 
   .workflow-studio-header__actions {
+    flex-wrap: wrap;
     justify-content: flex-start;
   }
 }
@@ -350,6 +341,10 @@ const workflowStudioHeaderCss = `
     display: none;
   }
 
+  .workflow-studio-header__action-divider {
+    display: none;
+  }
+
   .workflow-studio-header__primary-button,
   .workflow-studio-header__status-button,
   .workflow-studio-header__compact-button {
@@ -410,8 +405,9 @@ const HeaderBreadcrumb: React.FC<HeaderBreadcrumbProps> = ({
         event.preventDefault();
         onNavigateToTeams();
       }}
+      title={t('teamMemberWorkflowStudio.header.teamBreadcrumb', 'Teams')}
     >
-      {t('teamMemberWorkflowStudio.header.teamBreadcrumb', 'Team')}
+      {t('teamMemberWorkflowStudio.header.teamBreadcrumb', 'Teams')}
     </a>
     <span
       aria-hidden="true"
@@ -426,6 +422,10 @@ const HeaderBreadcrumb: React.FC<HeaderBreadcrumbProps> = ({
         event.preventDefault();
         onNavigateToTeam();
       }}
+      title={
+        teamName ||
+        t('teamMemberWorkflowStudio.header.currentTeam', 'Current team')
+      }
     >
       {teamName ||
         t('teamMemberWorkflowStudio.header.currentTeam', 'Current team')}
@@ -485,10 +485,13 @@ const HeaderIdentity: React.FC<HeaderIdentityProps> = ({
         onChange={(event) => onTitleChange(event.target.value)}
         onFocus={() => setTitleFocused(true)}
         ref={titleInputRef}
-        title={t(
-          'teamMemberWorkflowStudio.header.editWorkflowName',
-          'Edit workflow name',
-        )}
+        title={
+          workflowTitle ||
+          t(
+            'teamMemberWorkflowStudio.header.editWorkflowName',
+            'Edit workflow name',
+          )
+        }
         value={workflowTitle}
         variant="borderless"
       />
@@ -522,6 +525,13 @@ const HeaderIdentity: React.FC<HeaderIdentityProps> = ({
       className="workflow-studio-header__identity"
       data-testid="workflow-header-identity"
     >
+      <HeaderBreadcrumb
+        onNavigateToTeam={onNavigateToTeam}
+        onNavigateToTeams={onNavigateToTeams}
+        teamHref={teamHref}
+        teamName={teamName}
+        teamsHref={teamsHref}
+      />
       <Tooltip title={t('teamMemberWorkflowStudio.header.back', 'Back')}>
         <Button
           aria-label={t('teamMemberWorkflowStudio.header.back', 'Back')}
@@ -534,44 +544,36 @@ const HeaderIdentity: React.FC<HeaderIdentityProps> = ({
         />
       </Tooltip>
       <div className="workflow-studio-header__title-zone">
-        <HeaderBreadcrumb
-          onNavigateToTeam={onNavigateToTeam}
-          onNavigateToTeams={onNavigateToTeams}
-          teamHref={teamHref}
-          teamName={teamName}
-          teamsHref={teamsHref}
-        />
-        <span
-          aria-hidden="true"
-          className="workflow-studio-header__title-divider"
-        />
         {workflowTitleNode}
-      </div>
-      <fieldset
-        aria-label={t(
-          'teamMemberWorkflowStudio.header.statusAria',
-          'Workflow status',
-        )}
-        className="workflow-studio-header__badges"
-      >
-        <Tag
-          className="workflow-studio-header__status"
-          color={
-            publishStatusColor === 'default' ? 'default' : publishStatusColor
-          }
-          title={publishStatusTitle}
+        <div
+          aria-atomic="true"
+          aria-label={t(
+            'teamMemberWorkflowStudio.header.statusAria',
+            'Workflow status',
+          )}
+          aria-live="polite"
+          className="workflow-studio-header__badges"
+          role="status"
         >
-          {publishStatusLabel}
-        </Tag>
-        {dirty ? (
-          <Tag className="workflow-studio-header__status" color="gold">
-            {t(
-              'teamMemberWorkflowStudio.header.unsavedChanges',
-              'Unsaved changes',
-            )}
+          <Tag
+            className="workflow-studio-header__status"
+            color={
+              publishStatusColor === 'default' ? 'default' : publishStatusColor
+            }
+            title={publishStatusTitle}
+          >
+            {publishStatusLabel}
           </Tag>
-        ) : null}
-      </fieldset>
+          {dirty ? (
+            <Tag className="workflow-studio-header__status" color="gold">
+              {t(
+                'teamMemberWorkflowStudio.header.unsavedChanges',
+                'Unsaved changes',
+              )}
+            </Tag>
+          ) : null}
+        </div>
+      </div>
     </section>
   );
 };
@@ -661,17 +663,79 @@ const HeaderActions: React.FC<HeaderActionsProps> = ({
         'teamMemberWorkflowStudio.header.deleteSelectedNode',
         'Delete selected node',
       );
-  const moreMenuItems: WorkflowHeaderMenuItem[] = [
+  const invokeLabel = t('teamMemberWorkflowStudio.header.invoke', 'Invoke');
+  const publishedRunsLabel = t(
+    'teamMemberWorkflowStudio.header.publishedRuns',
+    'Published runs',
+  );
+  const recurringWorkLabel = t(
+    'teamMemberWorkflowStudio.header.recurringWork',
+    'Recurring work',
+  );
+  const automationsActionTitle = canOpenAutomations
+    ? t(
+        'teamMemberWorkflowStudio.header.openAutomations',
+        'Open recurring work for this member',
+      )
+    : automationsPlaceholderReason;
+  const contextualMenuItems: WorkflowHeaderMenuItem[] =
     hasSelectedConnection || hasSelectedNode
-      ? {
-          danger: true,
-          icon: <DeleteOutlined />,
-          key: hasSelectedConnection ? 'delete-connection' : 'delete-node',
-          label: deleteSelectionLabel,
-        }
-      : null,
-  ].filter(Boolean) as WorkflowHeaderMenuItem[];
-  const moreMenuHasActions = Boolean(moreMenuItems.length);
+      ? [
+          {
+            type: 'divider',
+          },
+          {
+            danger: true,
+            icon: <DeleteOutlined />,
+            key: hasSelectedConnection ? 'delete-connection' : 'delete-node',
+            label: deleteSelectionLabel,
+          },
+        ]
+      : [];
+  const moreMenuItems: WorkflowHeaderMenuItem[] = [
+    {
+      disabled: !canOpenInvoke,
+      icon: <PlayCircleOutlined />,
+      key: 'invoke',
+      label: canOpenInvoke ? (
+        <a href={invokeHref} title={invokePlaceholderReason}>
+          {invokeLabel}
+        </a>
+      ) : (
+        <span title={invokePlaceholderReason}>{invokeLabel}</span>
+      ),
+      title: invokePlaceholderReason,
+    },
+    {
+      disabled: !canOpenPublishedRuns,
+      icon: <HistoryOutlined />,
+      key: 'published-runs',
+      label: canOpenPublishedRuns ? (
+        <a href={publishedRunsHref} title={publishedRunsPlaceholderReason}>
+          {publishedRunsLabel}
+        </a>
+      ) : (
+        <span title={publishedRunsPlaceholderReason}>
+          {publishedRunsLabel}
+        </span>
+      ),
+      title: publishedRunsPlaceholderReason,
+    },
+    {
+      disabled: !canOpenAutomations,
+      icon: <ClockCircleOutlined />,
+      key: 'recurring-work',
+      label: canOpenAutomations ? (
+        <a href={automationsHref} title={automationsActionTitle}>
+          {recurringWorkLabel}
+        </a>
+      ) : (
+        <span title={automationsActionTitle}>{recurringWorkLabel}</span>
+      ),
+      title: automationsActionTitle,
+    },
+    ...contextualMenuItems,
+  ];
 
   return (
     <section
@@ -703,23 +767,6 @@ const HeaderActions: React.FC<HeaderActionsProps> = ({
           {t('teamMemberWorkflowStudio.header.run', 'Run')}
         </span>
       </Button>
-      <Button
-        aria-label={t('teamMemberWorkflowStudio.header.invoke', 'Invoke')}
-        className="workflow-studio-header__compact-button"
-        disabled={!canOpenInvoke}
-        href={canOpenInvoke ? invokeHref : undefined}
-        icon={<PlayCircleOutlined />}
-        onClick={(event) => {
-          event.preventDefault();
-          onOpenInvoke();
-        }}
-        size="small"
-        title={invokePlaceholderReason}
-      >
-        <span className="workflow-studio-header__action-label workflow-studio-header__action-label--secondary">
-          {t('teamMemberWorkflowStudio.header.invoke', 'Invoke')}
-        </span>
-      </Button>
       <Button
         aria-label={t('teamMemberWorkflowStudio.header.addNode', 'Add node')}
         className="workflow-studio-header__compact-button"
@@ -727,55 +774,107 @@ const HeaderActions: React.FC<HeaderActionsProps> = ({
         onClick={onAddNode}
         size="small"
       >
-        <span className="workflow-studio-header__action-label workflow-studio-header__action-label--secondary">
+        <span className="workflow-studio-header__action-label">
           {t('teamMemberWorkflowStudio.header.addNode', 'Add node')}
         </span>
       </Button>
-      <Button
-        aria-label={t(
-          'teamMemberWorkflowStudio.header.publishedRuns',
-          'Published runs',
-        )}
-        className="workflow-studio-header__compact-button"
-        disabled={!canOpenPublishedRuns}
-        href={canOpenPublishedRuns ? publishedRunsHref : undefined}
-        icon={<HistoryOutlined />}
-        onClick={(event) => {
-          event.preventDefault();
-          onOpenPublishedRuns();
+      <Dropdown
+        menu={{
+          items: moreMenuItems,
+          onClick: ({ domEvent, key }) => {
+            if (key === 'invoke') {
+              domEvent.preventDefault();
+              if (canOpenInvoke) {
+                onOpenInvoke();
+              }
+              return;
+            }
+
+            if (key === 'published-runs') {
+              domEvent.preventDefault();
+              if (canOpenPublishedRuns) {
+                onOpenPublishedRuns();
+              }
+              return;
+            }
+
+            if (key === 'recurring-work') {
+              domEvent.preventDefault();
+              if (canOpenAutomations) {
+                onOpenAutomations();
+              }
+              return;
+            }
+
+            if (key === 'delete-node') {
+              const confirmed =
+                typeof window === 'undefined' ||
+                window.confirm(
+                  t(
+                    'teamMemberWorkflowStudio.header.confirmDeleteNode',
+                    'Delete the selected node? This cannot be undone.',
+                  ),
+                );
+              if (confirmed) {
+                onDeleteNode();
+              }
+              return;
+            }
+
+            if (key === 'delete-connection') {
+              const confirmed =
+                typeof window === 'undefined' ||
+                window.confirm(
+                  t(
+                    'teamMemberWorkflowStudio.header.confirmDeleteConnection',
+                    'Delete the selected connection? This cannot be undone.',
+                  ),
+                );
+              if (confirmed) {
+                onDeleteConnection();
+              }
+            }
+          },
         }}
-        size="small"
-        title={publishedRunsPlaceholderReason}
+        placement="bottomRight"
+        trigger={['click']}
       >
-        <span className="workflow-studio-header__action-label workflow-studio-header__action-label--secondary">
-          {t('teamMemberWorkflowStudio.header.publishedRuns', 'Published runs')}
-        </span>
-      </Button>
+        <Button
+          aria-label={t(
+            'teamMemberWorkflowStudio.header.moreActions',
+            'More workflow actions',
+          )}
+          className="workflow-studio-header__icon-button"
+          icon={<MoreOutlined />}
+          size="small"
+          title={t('teamMemberWorkflowStudio.header.more', 'More')}
+        />
+      </Dropdown>
+      <span
+        aria-hidden="true"
+        className="workflow-studio-header__action-divider"
+      />
       <Button
-        aria-label={t(
-          'teamMemberWorkflowStudio.header.recurringWork',
-          'Recurring work',
-        )}
+        aria-label={t('teamMemberWorkflowStudio.header.editYaml', 'Edit YAML')}
         className="workflow-studio-header__compact-button"
-        disabled={!canOpenAutomations}
-        href={canOpenAutomations ? automationsHref : undefined}
-        icon={<ClockCircleOutlined />}
-        onClick={(event) => {
-          event.preventDefault();
-          onOpenAutomations();
-        }}
+        disabled={!canEditYaml}
+        icon={<CodeOutlined />}
+        onClick={onEditYaml}
         size="small"
         title={
-          canOpenAutomations
+          canEditYaml
             ? t(
-                'teamMemberWorkflowStudio.header.openAutomations',
-                'Open recurring work for this member',
+                'teamMemberWorkflowStudio.header.editYamlTitle',
+                'Edit workflow YAML',
+              )
+            : t(
+                'teamMemberWorkflowStudio.header.editYamlUnavailable',
+                'Load the workflow draft before editing YAML.',
               )
-            : automationsPlaceholderReason
         }
       >
-        <span className="workflow-studio-header__action-label workflow-studio-header__action-label--secondary">
-          {t('teamMemberWorkflowStudio.header.recurringWork', 'Recurring work')}
+        <span className="workflow-studio-header__action-label">
+          {t('teamMemberWorkflowStudio.header.editYaml', 'Edit YAML')}
         </span>
       </Button>
       <Button
@@ -815,6 +914,7 @@ const HeaderActions: React.FC<HeaderActionsProps> = ({
                     'Publish member workflow',
                   )
             }
+            type={!publishDisabled && !canSave ? 'primary' : 'default'}
           >
             <span className="workflow-studio-header__action-label">
               {t('teamMemberWorkflowStudio.header.publish', 'Publish')}
@@ -846,79 +946,6 @@ const HeaderActions: React.FC<HeaderActionsProps> = ({
           </Button>
         )
       ) : null}
-      <Button
-        aria-label={t('teamMemberWorkflowStudio.header.editYaml', 'Edit YAML')}
-        className="workflow-studio-header__compact-button"
-        disabled={!canEditYaml}
-        icon={<CodeOutlined />}
-        onClick={onEditYaml}
-        size="small"
-        title={
-          canEditYaml
-            ? t(
-                'teamMemberWorkflowStudio.header.editYamlTitle',
-                'Edit workflow YAML',
-              )
-            : t(
-                'teamMemberWorkflowStudio.header.editYamlUnavailable',
-                'Load the workflow draft before editing YAML.',
-              )
-        }
-      >
-        <span className="workflow-studio-header__action-label">
-          {t('teamMemberWorkflowStudio.header.editYaml', 'Edit YAML')}
-        </span>
-      </Button>
-      {moreMenuHasActions ? (
-        <Dropdown
-          menu={{
-            items: moreMenuItems,
-            onClick: ({ key }) => {
-              if (key === 'delete-node') {
-                const confirmed =
-                  typeof window === 'undefined' ||
-                  window.confirm(
-                    t(
-                      'teamMemberWorkflowStudio.header.confirmDeleteNode',
-                      'Delete the selected node? This cannot be undone.',
-                    ),
-                  );
-                if (confirmed) {
-                  onDeleteNode();
-                }
-                return;
-              }
-
-              if (key === 'delete-connection') {
-                const confirmed =
-                  typeof window === 'undefined' ||
-                  window.confirm(
-                    t(
-                      'teamMemberWorkflowStudio.header.confirmDeleteConnection',
-                      'Delete the selected connection? This cannot be undone.',
-                    ),
-                  );
-                if (confirmed) {
-                  onDeleteConnection();
-                }
-              }
-            },
-          }}
-          placement="bottomRight"
-          trigger={['click']}
-        >
-          <Button
-            aria-label={t(
-              'teamMemberWorkflowStudio.header.moreActions',
-              'More workflow actions',
-            )}
-            className="workflow-studio-header__icon-button"
-            icon={<MoreOutlined />}
-            size="small"
-            title={t('teamMemberWorkflowStudio.header.more', 'More')}
-          />
-        </Dropdown>
-      ) : null}
     </section>
   );
 };
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioNodeDetailPanel.tsx b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioNodeDetailPanel.tsx
index 201a379f4c..18d0b64bd5 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioNodeDetailPanel.tsx
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/components/WorkflowStudioNodeDetailPanel.tsx
@@ -29,14 +29,23 @@ type WorkflowStudioNodeDetailPanelProps = {
   readonly onClose: () => void;
   readonly onConfigurationChange: (parametersText: string) => void;
   readonly onConfigurationErrorChange: (error: string) => void;
+  readonly onWidthChange: (width: number) => void;
   readonly stepDraft: StudioStepInspectorDraft | null;
+  readonly width: number;
 };
 
-const DEFAULT_PANEL_WIDTH = 420;
+export const WORKFLOW_STUDIO_NODE_INSPECTOR_DEFAULT_WIDTH = 420;
+export const WORKFLOW_STUDIO_NODE_INSPECTOR_OVERLAY_INSET = 16;
 const MIN_PANEL_WIDTH = 360;
 const MAX_PANEL_WIDTH = 500;
-
-function buildInspectorCss(screenMd: number): string {
+const WORKFLOW_STUDIO_NODE_INSPECTOR_RADIUS = 8;
+const WORKFLOW_STUDIO_NODE_INSPECTOR_SCROLLBAR_WIDTH = 6;
+const WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY = "#1D4ED8";
+const WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY_HOVER = "#1E40AF";
+const WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY_ACTIVE = "#1E3A8A";
+
+function buildInspectorCss(screenLg: number): string {
+  const compactMaxWidth = Math.max(0, screenLg - 1);
   return `
 .workflow-studio-node-inspector {
   color: var(--workflow-node-inspector-text);
@@ -51,6 +60,7 @@ function buildInspectorCss(screenMd: number): string {
   display: flex;
   justify-content: center;
   left: calc(var(--workflow-node-inspector-resize-hit-width) / -2);
+  margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
@@ -74,20 +84,52 @@ function buildInspectorCss(screenMd: number): string {
   width: var(--workflow-node-inspector-scrollbar-width);
 }
 
+.workflow-studio-node-inspector__body {
+  scrollbar-color: var(--workflow-node-inspector-scroll-thumb) transparent;
+  scrollbar-width: thin;
+}
+
+.workflow-studio-node-inspector__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .workflow-studio-node-inspector__body::-webkit-scrollbar-thumb {
   background: var(--workflow-node-inspector-scroll-thumb);
-  border: 3px solid var(--workflow-node-inspector-surface);
+  border: 1px solid var(--workflow-node-inspector-surface);
   border-radius: var(--workflow-node-inspector-pill-radius);
 }
 
-@media (max-width: ${screenMd}px) {
+.workflow-studio-node-inspector
+  .workflow-studio-node-inspector__update.ant-btn-primary:not(:disabled) {
+  background: var(--workflow-node-inspector-primary);
+  border-color: var(--workflow-node-inspector-primary);
+  color: #ffffff;
+}
+
+.workflow-studio-node-inspector
+  .workflow-studio-node-inspector__update.ant-btn-primary:not(:disabled):hover,
+.workflow-studio-node-inspector
+  .workflow-studio-node-inspector__update.ant-btn-primary:not(:disabled):focus-visible {
+  background: var(--workflow-node-inspector-primary-hover);
+  border-color: var(--workflow-node-inspector-primary-hover);
+  color: #ffffff;
+}
+
+.workflow-studio-node-inspector
+  .workflow-studio-node-inspector__update.ant-btn-primary:not(:disabled):active {
+  background: var(--workflow-node-inspector-primary-active);
+  border-color: var(--workflow-node-inspector-primary-active);
+  color: #ffffff;
+}
+
+@media (max-width: ${compactMaxWidth}px) {
   .workflow-studio-node-inspector {
     border-left: 0 !important;
     border-radius: var(--workflow-node-inspector-mobile-radius) var(--workflow-node-inspector-mobile-radius) 0 0 !important;
     border-top: 1px solid var(--workflow-node-inspector-border) !important;
     bottom: 0 !important;
     left: 0 !important;
-    max-height: calc(100vh - var(--workflow-node-inspector-mobile-offset)) !important;
+    max-height: calc(100% - var(--workflow-node-inspector-mobile-offset)) !important;
     max-width: none !important;
     right: 0 !important;
     top: auto !important;
@@ -288,10 +330,11 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
   onClose,
   onConfigurationChange,
   onConfigurationErrorChange,
+  onWidthChange,
   stepDraft,
+  width,
 }) => {
   const { token } = theme.useToken();
-  const [panelWidth, setPanelWidth] = React.useState(DEFAULT_PANEL_WIDTH);
   const [resizing, setResizing] = React.useState(false);
   const resizeStartRef = React.useRef<{
     readonly startWidth: number;
@@ -334,8 +377,8 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
     return null;
   }
 
-  const overlayInset = token.padding;
-  const inspectorCss = buildInspectorCss(token.screenMD);
+  const overlayInset = WORKFLOW_STUDIO_NODE_INSPECTOR_OVERLAY_INSET;
+  const inspectorCss = buildInspectorCss(token.screenLG);
   const inspectorVariables: InspectorCssVariables = {
     "--workflow-node-inspector-border": token.colorBorderSecondary,
     "--workflow-node-inspector-border-strong": token.colorBorder,
@@ -347,10 +390,19 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
       : token.controlHeightLG
         ? doubledPx(token.controlHeightLG)
         : doubledPx(token.paddingXL),
-    "--workflow-node-inspector-mobile-radius": toPx(token.borderRadiusLG),
+    "--workflow-node-inspector-mobile-radius": toPx(
+      WORKFLOW_STUDIO_NODE_INSPECTOR_RADIUS,
+    ),
     "--workflow-node-inspector-muted": token.colorTextSecondary,
-    "--workflow-node-inspector-panel-radius": toPx(token.borderRadiusLG),
-    "--workflow-node-inspector-pill-radius": toPx(token.borderRadiusSM),
+    "--workflow-node-inspector-panel-radius": toPx(
+      WORKFLOW_STUDIO_NODE_INSPECTOR_RADIUS,
+    ),
+    "--workflow-node-inspector-pill-radius": "3px",
+    "--workflow-node-inspector-primary": WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY,
+    "--workflow-node-inspector-primary-active":
+      WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY_ACTIVE,
+    "--workflow-node-inspector-primary-hover":
+      WORKFLOW_STUDIO_NODE_INSPECTOR_PRIMARY_HOVER,
     "--workflow-node-inspector-resize": token.colorBorder,
     "--workflow-node-inspector-resize-active": token.colorPrimary,
     "--workflow-node-inspector-resize-grip-height": token.controlHeightLG
@@ -359,7 +411,9 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
     "--workflow-node-inspector-resize-grip-width": toPx(token.lineWidthBold),
     "--workflow-node-inspector-resize-hit-width": toPx(token.controlHeightXS),
     "--workflow-node-inspector-scroll-thumb": token.colorTextQuaternary,
-    "--workflow-node-inspector-scrollbar-width": toPx(token.controlHeightXS),
+    "--workflow-node-inspector-scrollbar-width": toPx(
+      WORKFLOW_STUDIO_NODE_INSPECTOR_SCROLLBAR_WIDTH,
+    ),
     "--workflow-node-inspector-section-gap": toPx(token.paddingLG),
     "--workflow-node-inspector-section-radius": toPx(token.borderRadius),
     "--workflow-node-inspector-surface": token.colorBgElevated,
@@ -377,7 +431,7 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
   const startResize = (event: React.PointerEvent<HTMLDivElement>) => {
     event.preventDefault();
     resizeStartRef.current = {
-      startWidth: panelWidth,
+      startWidth: width,
       startX: event.clientX,
     };
     setResizing(true);
@@ -390,7 +444,7 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
     }
 
     const delta = resizeStartRef.current.startX - event.clientX;
-    setPanelWidth(clampPanelWidth(resizeStartRef.current.startWidth + delta));
+    onWidthChange(clampPanelWidth(resizeStartRef.current.startWidth + delta));
   };
 
   const stopResize = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -412,7 +466,7 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
 
     event.preventDefault();
     const direction = event.key === "ArrowLeft" ? 1 : -1;
-    setPanelWidth((currentWidth) => clampPanelWidth(currentWidth + direction * 16));
+    onWidthChange(clampPanelWidth(width + direction * 16));
   };
 
   const updateFieldValue = (fieldName: string, value: string) => {
@@ -604,7 +658,7 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
           background: token.colorBgElevated,
           border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`,
           borderLeft: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-          borderRadius: token.borderRadiusLG,
+          borderRadius: WORKFLOW_STUDIO_NODE_INSPECTOR_RADIUS,
           bottom: overlayInset,
           boxShadow: token.boxShadowSecondary,
           display: "flex",
@@ -615,11 +669,11 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
           position: "absolute",
           right: overlayInset,
           top: overlayInset,
-          width: panelWidth,
+          width,
           zIndex: token.zIndexPopupBase,
         }}
       >
-        <div
+        <hr
           aria-label={t(
             "teamMemberWorkflowStudio.nodeInspector.resizeHandle",
             "Resize node inspector",
@@ -627,14 +681,13 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
           aria-orientation="vertical"
           aria-valuemax={MAX_PANEL_WIDTH}
           aria-valuemin={MIN_PANEL_WIDTH}
-          aria-valuenow={panelWidth}
+          aria-valuenow={width}
           className="workflow-studio-node-inspector__resize"
           onKeyDown={resizeWithKeyboard}
           onPointerCancel={stopResize}
           onPointerDown={startResize}
           onPointerMove={updateResize}
           onPointerUp={stopResize}
-          role="separator"
           tabIndex={0}
         />
         <header
@@ -754,6 +807,7 @@ const WorkflowStudioNodeDetailPanel: React.FC<WorkflowStudioNodeDetailPanelProps
               </Typography.Paragraph>
             </div>
             <Button
+              className="workflow-studio-node-inspector__update"
               disabled={Boolean(structuredError)}
               onClick={applyConfigurationToDraft}
               size="small"
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/hooks/useTeamMemberWorkflowStudio.ts b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/hooks/useTeamMemberWorkflowStudio.ts
index 6857d1cc8a..c4cdf0c584 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/hooks/useTeamMemberWorkflowStudio.ts
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/hooks/useTeamMemberWorkflowStudio.ts
@@ -1092,6 +1092,10 @@ export function useTeamMemberWorkflowStudio(): TeamMemberWorkflowStudioState {
     React.useState<StudioMemberBindingRunStatusResponse | null>(null);
   const [publishError, setPublishError] = React.useState("");
   const [publishErrorVisible, setPublishErrorVisible] = React.useState(true);
+  const clearPublishError = React.useCallback(() => {
+    setPublishError("");
+    setPublishErrorVisible(true);
+  }, []);
   const [nodeLibraryOpen, setNodeLibraryOpen] = React.useState(false);
   const [draftRunPanelOpen, setDraftRunPanelOpen] = React.useState(false);
   const [yamlPanelOpen, setYamlPanelOpen] = React.useState(false);
@@ -2659,6 +2663,16 @@ export function useTeamMemberWorkflowStudio(): TeamMemberWorkflowStudioState {
     }
 
     const memberResult = await memberQuery.refetch();
+    if (memberResult.isError || !memberResult.data) {
+      const refreshError = memberResult.error;
+      void message.error(
+        refreshError instanceof Error
+          ? refreshError.message
+          : "Failed to refresh published member status.",
+      );
+      return;
+    }
+
     if (routeDraftWorkflowId) {
       await workflowQuery.refetch();
     }
@@ -2688,11 +2702,13 @@ export function useTeamMemberWorkflowStudio(): TeamMemberWorkflowStudioState {
 
       setPublishBindingRun(refreshedRun);
       if (refreshedRun.status === "failed" || refreshedRun.status === "rejected") {
+        setPublishErrorVisible(true);
         setPublishError(readBindingRunFailureMessage(refreshedRun));
         void message.error(readBindingRunFailureMessage(refreshedRun));
         return;
       }
 
+      clearPublishError();
       if (refreshedRun.status === "succeeded") {
         void message.success("Published member status refreshed.");
         return;
@@ -2703,6 +2719,7 @@ export function useTeamMemberWorkflowStudio(): TeamMemberWorkflowStudioState {
     }
 
     if (hasCurrentCompletedMemberBinding(refreshedMember)) {
+      clearPublishError();
       setPublishBindingRun((currentRun) =>
         currentRun && !isTerminalBindingRun(currentRun)
           ? {
@@ -2715,8 +2732,18 @@ export function useTeamMemberWorkflowStudio(): TeamMemberWorkflowStudioState {
       return;
     }
 
+    clearPublishError();
+    setPublishBindingRun(null);
     void message.info("No published member status is visible yet.");
-  }, [memberQuery, route.memberId, route.mode, route.scopeId, routeDraftWorkflowId, workflowQuery]);
+  }, [
+    clearPublishError,
+    memberQuery,
+    route.memberId,
+    route.mode,
+    route.scopeId,
+    routeDraftWorkflowId,
+    workflowQuery,
+  ]);
   const executionStatus = currentDraftRunMutation.isPending
     ? "running"
     : resolveWorkflowExecutionStatus(executionDetail);
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.test.tsx b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.test.tsx
index 77c5ba12e2..875877c0f6 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.test.tsx
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.test.tsx
@@ -1,4 +1,5 @@
 import { act, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { Grid } from "antd";
 import React from "react";
 import {
   cleanupTestQueryClients,
@@ -29,11 +30,15 @@ jest.mock("@/shared/graphs/GraphCanvas", () => ({
     ) => void;
     onNodeSelect?: (nodeId: string) => void;
     overlayContent?: unknown;
+    viewportRightInset?: number;
   }) => {
     const React = require("react");
     return React.createElement(
       "div",
-      { "data-testid": "graph-canvas" },
+      {
+        "data-testid": "graph-canvas",
+        "data-viewport-right-inset": String(props.viewportRightInset ?? 0),
+      },
       React.createElement(
         "span",
         { key: "count" },
@@ -461,7 +466,10 @@ function closeOpenMenu() {
 function clickMoreAction(
   name:
     | "Delete selected connection"
-    | "Delete selected node",
+    | "Delete selected node"
+    | "Invoke"
+    | "Published runs"
+    | "Recurring work",
 ) {
   openMoreActionsMenu();
   fireEvent.click(screen.getByRole("menuitem", { name }));
@@ -547,6 +555,14 @@ function mockNewWorkflowMemberCreateFixtures() {
 describe("TeamMemberWorkflowStudioPage", () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    jest.spyOn(Grid, "useBreakpoint").mockReturnValue({
+      xs: true,
+      sm: true,
+      md: true,
+      lg: true,
+      xl: true,
+      xxl: true,
+    });
     window.history.replaceState({}, "", "/");
     mockTeam();
     mockSerializeYaml();
@@ -565,6 +581,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
   });
 
   afterEach(() => {
+    jest.restoreAllMocks();
     cleanupTestQueryClients();
   });
 
@@ -580,14 +597,32 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(await screen.findByDisplayValue("Untitled member")).toBeTruthy();
     expect(screen.getByText("Add first step")).toBeTruthy();
     expect(screen.getByText("nodes:0")).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Invoke" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Invoke" })).toHaveAttribute(
+    openMoreActionsMenu();
+    const invokeMenuItem = screen.getByRole("menuitem", { name: "Invoke" });
+    expect(invokeMenuItem).toHaveAttribute("aria-disabled", "true");
+    expect(within(invokeMenuItem).getByText("Invoke")).toHaveAttribute(
       "title",
       "Save this member before invoking it.",
     );
     expect(screen.queryByRole("link", { name: "Invoke" })).toBeNull();
-    expect(screen.getByRole("button", { name: "Recurring work" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: "Recurring work" })).toHaveAttribute(
+    const publishedRunsMenuItem = screen.getByRole("menuitem", {
+      name: "Published runs",
+    });
+    expect(publishedRunsMenuItem).toHaveAttribute("aria-disabled", "true");
+    expect(
+      within(publishedRunsMenuItem).getByText("Published runs"),
+    ).toHaveAttribute(
+      "title",
+      "Save this member before viewing published runs.",
+    );
+    expect(screen.queryByRole("link", { name: "Published runs" })).toBeNull();
+    const recurringWorkMenuItem = screen.getByRole("menuitem", {
+      name: "Recurring work",
+    });
+    expect(recurringWorkMenuItem).toHaveAttribute("aria-disabled", "true");
+    expect(
+      within(recurringWorkMenuItem).getByText("Recurring work"),
+    ).toHaveAttribute(
       "title",
       "Save this member before adding recurring work.",
     );
@@ -1275,7 +1310,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
         expect.any(Function),
       );
     });
-    fireEvent.click(screen.getByRole("link", { name: "Team" }));
+    fireEvent.click(screen.getByRole("link", { name: "Teams" }));
     expect(confirmSpy).toHaveBeenCalledWith(
       "You have unsaved workflow changes. Leave this editor and discard them?",
     );
@@ -1739,6 +1774,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
     renderWithQueryClient(React.createElement(TeamMemberWorkflowStudioPage));
 
     expect(await screen.findByDisplayValue("Workflow Alpha")).toBeTruthy();
+    openMoreActionsMenu();
     const recurringWorkLink = await screen.findByRole("link", {
       name: "Recurring work",
     });
@@ -1801,6 +1837,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
     renderWithQueryClient(React.createElement(TeamMemberWorkflowStudioPage));
 
     expect(await screen.findByDisplayValue("Workflow Alpha")).toBeTruthy();
+    openMoreActionsMenu();
     const invokeLink = await screen.findByRole("link", {
       name: "Invoke",
     });
@@ -2305,6 +2342,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(screen.getByText("Published")).toBeTruthy();
     expect(screen.queryByText("Draft")).toBeNull();
     expect(screen.queryByRole("button", { name: "Refresh status" })).toBeNull();
+    openMoreActionsMenu();
     const publishedRunsButton = screen.getByRole("link", {
       name: "Published runs",
     });
@@ -2621,9 +2659,20 @@ describe("TeamMemberWorkflowStudioPage", () => {
       expect(screen.getByText("nodes:2")).toBeTruthy();
       expect(screen.getByText("Unsaved changes")).toBeTruthy();
     });
+    fireEvent.click(screen.getByRole("button", { name: "node:step:triage" }));
+    expect(screen.getByLabelText("Node inspector")).toBeTruthy();
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "452",
+    );
     clickYamlAction("Edit YAML");
 
     const yamlView = await screen.findByLabelText("Workflow YAML editor");
+    expect(screen.queryByLabelText("Node inspector")).toBeNull();
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "0",
+    );
     await waitFor(() => {
       expect((yamlView as HTMLTextAreaElement).value).toContain("type: guard");
       expect(studioApi.serializeYaml).toHaveBeenCalledWith(
@@ -2828,8 +2877,13 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(screen.getByText("nodes:2")).toBeTruthy();
     expect(screen.queryByTestId("workflow-node-inspector")).toBeNull();
     expect(
-      screen.queryByRole("button", { name: "More workflow actions" }),
+      screen.getByRole("button", { name: "More workflow actions" }),
+    ).toBeTruthy();
+    openMoreActionsMenu();
+    expect(
+      screen.queryByRole("menuitem", { name: "Delete selected connection" }),
     ).toBeNull();
+    closeOpenMenu();
     expect(confirmSpy).toHaveBeenCalledWith(
       "Delete the selected connection? This cannot be undone.",
     );
@@ -3010,9 +3064,30 @@ describe("TeamMemberWorkflowStudioPage", () => {
     fireEvent.click(screen.getByRole("button", { name: "node:step:triage" }));
     const inspector = screen.getByLabelText("Node inspector");
     expect(inspector).toHaveStyle({
+      borderRadius: "8px",
       position: "absolute",
       width: "420px",
     });
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "452",
+    );
+    expect(
+      inspector.style.getPropertyValue(
+        "--workflow-node-inspector-scrollbar-width",
+      ),
+    ).toBe("6px");
+    expect(
+      inspector.style.getPropertyValue("--workflow-node-inspector-primary"),
+    ).toBe("#1D4ED8");
+    const inspectorStyleText = findRenderedStyleText(
+      ".workflow-studio-node-inspector__body::-webkit-scrollbar",
+    );
+    expect(inspectorStyleText).toContain("border: 1px solid");
+    expect(inspectorStyleText).toContain("scrollbar-width: thin;");
+    expect(inspectorStyleText).toContain(
+      "background: var(--workflow-node-inspector-primary-hover);",
+    );
     expect(screen.getByLabelText("Resize node inspector")).toBeTruthy();
     expect(within(inspector).queryByText("triage")).toBeNull();
     expect(within(inspector).getAllByText("LLM call").length).toBeGreaterThan(0);
@@ -3173,10 +3248,21 @@ describe("TeamMemberWorkflowStudioPage", () => {
     fireEvent.click(screen.getByRole("button", { name: "node:step:triage" }));
     const inspector = screen.getByLabelText("Node inspector");
     const resizeHandle = screen.getByLabelText("Resize node inspector");
+    const inspectorStyle = Array.from(document.querySelectorAll("style")).find(
+      (style) => style.textContent?.includes(".workflow-studio-node-inspector"),
+    );
+    expect(inspectorStyle).toHaveTextContent("@media (max-width: 991px)");
+    expect(inspectorStyle).toHaveTextContent(
+      "max-height: calc(100% - var(--workflow-node-inspector-mobile-offset)) !important;",
+    );
     expect(inspector).toHaveStyle({ width: "420px" });
     expect(resizeHandle).toHaveAttribute("aria-valuemin", "360");
     expect(resizeHandle).toHaveAttribute("aria-valuemax", "500");
     expect(resizeHandle).toHaveAttribute("aria-valuenow", "420");
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "452",
+    );
 
     for (let index = 0; index < 10; index += 1) {
       fireEvent.keyDown(resizeHandle, { key: "ArrowLeft" });
@@ -3184,6 +3270,10 @@ describe("TeamMemberWorkflowStudioPage", () => {
 
     expect(inspector).toHaveStyle({ width: "500px" });
     expect(resizeHandle).toHaveAttribute("aria-valuenow", "500");
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "532",
+    );
 
     for (let index = 0; index < 20; index += 1) {
       fireEvent.keyDown(resizeHandle, { key: "ArrowRight" });
@@ -3191,6 +3281,33 @@ describe("TeamMemberWorkflowStudioPage", () => {
 
     expect(inspector).toHaveStyle({ width: "360px" });
     expect(resizeHandle).toHaveAttribute("aria-valuenow", "360");
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "392",
+    );
+
+    (Grid.useBreakpoint as jest.Mock).mockReturnValue({
+      xs: true,
+      sm: true,
+      md: true,
+      lg: false,
+      xl: false,
+      xxl: false,
+    });
+    fireEvent.keyDown(resizeHandle, { key: "ArrowLeft" });
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "0",
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Close node inspector" }),
+    );
+    expect(screen.queryByLabelText("Node inspector")).toBeNull();
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "0",
+    );
   });
 
   it("resizes the node inspector with pointer drag and restores page resize styles", async () => {
@@ -3244,6 +3361,10 @@ describe("TeamMemberWorkflowStudioPage", () => {
     const resizeHandle = screen.getByLabelText("Resize node inspector");
     const setPointerCapture = jest.fn();
     const releasePointerCapture = jest.fn();
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "452",
+    );
     resizeHandle.setPointerCapture = setPointerCapture;
     resizeHandle.releasePointerCapture = releasePointerCapture;
     resizeHandle.hasPointerCapture = jest.fn(() => true);
@@ -3260,6 +3381,10 @@ describe("TeamMemberWorkflowStudioPage", () => {
 
     expect(inspector).toHaveStyle({ width: "500px" });
     expect(resizeHandle).toHaveAttribute("aria-valuenow", "500");
+    expect(screen.getByTestId("graph-canvas")).toHaveAttribute(
+      "data-viewport-right-inset",
+      "532",
+    );
 
     fireEvent(resizeHandle, createPointerDragEvent("pointerup", 240));
 
@@ -3852,7 +3977,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
     });
     expect(screen.getByLabelText("Workflow title")).toHaveAttribute(
       "title",
-      "Edit workflow name",
+      "Workflow Alpha",
     );
     fireEvent.click(
       screen.getByRole("button", { name: "Edit workflow name" }),
@@ -3878,26 +4003,40 @@ describe("TeamMemberWorkflowStudioPage", () => {
       ".workflow-studio-header__identity",
     );
     expect(headerResponsiveRules).toContain("overflow: visible;");
-    expect(headerResponsiveRules).toContain("flex-wrap: wrap;");
     expect(headerResponsiveRules).toContain(
-      "max-width: min(360px, 100%);",
+      "grid-template-columns: 30px minmax(0, 1fr);",
     );
-    expect(headerResponsiveRules).toContain("@media (max-width: 1320px)");
+    expect(headerResponsiveRules).toContain("grid-template-rows: auto auto;");
+    expect(headerResponsiveRules).toContain("grid-column: 1;");
+    expect(headerResponsiveRules).toContain("grid-row: 2;");
+    expect(headerResponsiveRules).toContain(
+      "max-width: min(480px, 100%);",
+    );
+    expect(headerResponsiveRules).toContain(
+      ".workflow-studio-header__title-input.ant-input",
+    );
+    expect(headerResponsiveRules).toContain("text-overflow: ellipsis;");
     expect(headerResponsiveRules).toContain("@media (max-width: 980px)");
+    expect(headerResponsiveRules).not.toContain("@media (max-width: 1320px)");
     expect(headerResponsiveRules).toContain("overflow: hidden;");
     expect(headerResponsiveRules).not.toContain("overflow-x: auto;");
     expect(screen.queryByTestId("workflow-header-context-row")).toBeNull();
     expect(screen.queryByTestId("workflow-header-node-actions")).toBeNull();
-    expect(within(headerIdentity).getByRole("link", { name: "Team" })).toHaveAttribute(
-      "href",
-      "/scopes",
-    );
+    expect(
+      within(headerIdentity).getByRole("link", { name: "Teams" }),
+    ).toHaveAttribute("href", "/scopes");
+    expect(
+      within(headerIdentity).getByRole("link", { name: "Teams" }),
+    ).toHaveAttribute("title", "Teams");
     expect(
       within(headerIdentity).getByRole("link", { name: "Support Team" }),
     ).toHaveAttribute(
       "href",
       "/scopes/scope-1/teams/t-alpha?memberId=member-alpha&workflowId=workflow-alpha&tab=members",
     );
+    expect(
+      within(headerIdentity).getByRole("link", { name: "Support Team" }),
+    ).toHaveAttribute("title", "Support Team");
     const globalBackButton = within(headerIdentity).getByRole("button", {
       name: "Back",
     });
@@ -3915,20 +4054,16 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(
       within(headerPrimaryActions).getByRole("button", { name: "Add node" }),
     ).toBeTruthy();
-    const publishedRunsButton = within(headerPrimaryActions).getByRole("button", {
-      name: "Published runs",
+    const saveButton = within(headerPrimaryActions).getByRole("button", {
+      name: "Save",
     });
-    expect(publishedRunsButton).toBeDisabled();
-    expect(publishedRunsButton).toHaveAttribute(
-      "title",
-      "Publish this member to start recording published runs.",
-    );
-    expect(
-      within(headerPrimaryActions).getByRole("button", { name: "Save" }),
-    ).toBeTruthy();
-    expect(
-      within(headerPrimaryActions).getByRole("button", { name: "Publish" }),
-    ).toBeTruthy();
+    const publishButton = within(headerPrimaryActions).getByRole("button", {
+      name: "Publish",
+    });
+    expect(saveButton).toBeDisabled();
+    expect(saveButton).not.toHaveClass("ant-btn-primary");
+    expect(publishButton).toBeEnabled();
+    expect(publishButton).toHaveClass("ant-btn-primary");
     expect(
       within(headerPrimaryActions).queryByRole("button", {
         name: "Refresh status",
@@ -3943,10 +4078,23 @@ describe("TeamMemberWorkflowStudioPage", () => {
       within(headerPrimaryActions).getByRole("button", { name: "Edit YAML" }),
     ).toBeTruthy();
     expect(
-      within(headerPrimaryActions).queryByRole("button", {
+      within(headerPrimaryActions).getByRole("button", {
         name: "More workflow actions",
       }),
-    ).toBeNull();
+    ).toBeTruthy();
+    openMoreActionsMenu();
+    const publishedRunsMenuItem = screen.getByRole("menuitem", {
+      name: "Published runs",
+    });
+    expect(publishedRunsMenuItem).toHaveAttribute("aria-disabled", "true");
+    expect(
+      within(publishedRunsMenuItem).getByText("Published runs"),
+    ).toHaveAttribute(
+      "title",
+      "Publish this member to start recording published runs.",
+    );
+    expect(screen.queryByRole("link", { name: "Published runs" })).toBeNull();
+    closeOpenMenu();
     expect(screen.queryByRole("button", { name: "Paste YAML" })).toBeNull();
     expect(screen.queryByRole("button", { name: "View YAML" })).toBeNull();
     expect(screen.queryByRole("button", { name: "Delete node" })).toBeNull();
@@ -4030,10 +4178,13 @@ describe("TeamMemberWorkflowStudioPage", () => {
     await waitFor(() => {
       expect(consolePanel).toHaveTextContent("succeeded");
     });
-    await waitFor(() => {
-      expect(publishedRunsButton).toBeDisabled();
-      expect(publishedRunsButton).not.toHaveAttribute("href");
+    openMoreActionsMenu();
+    const publishedRunsMenuItemAfterRun = screen.getByRole("menuitem", {
+      name: "Published runs",
     });
+    expect(publishedRunsMenuItemAfterRun).toHaveAttribute("aria-disabled", "true");
+    expect(screen.queryByRole("link", { name: "Published runs" })).toBeNull();
+    closeOpenMenu();
     expect(within(consolePanel).getByLabelText("Logs overview")).toBeTruthy();
     expect(within(consolePanel).getByLabelText("Log details")).toBeTruthy();
     expect(consolePanel).toHaveTextContent(/Tokens\s*42/);
@@ -4218,19 +4369,25 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(readActionButtonNames()).toEqual([
       "Run",
       "Add node",
-      "Save",
+      "More workflow actions",
       "Edit YAML",
+      "Save",
     ]);
     expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
 
     expect(
-      within(headerPrimaryActions).queryByRole("button", {
+      within(headerPrimaryActions).getByRole("button", {
         name: "More workflow actions",
       }),
-    ).toBeNull();
+    ).toBeTruthy();
+    openMoreActionsMenu();
+    expect(screen.getByRole("link", { name: "Invoke" })).toBeTruthy();
+    expect(screen.getByRole("link", { name: "Published runs" })).toBeTruthy();
+    expect(screen.getByRole("link", { name: "Recurring work" })).toBeTruthy();
     expect(
       screen.queryByRole("menuitem", { name: "Delete selected node" }),
     ).toBeNull();
+    closeOpenMenu();
 
     const editYamlButton = screen.getByRole("button", { name: "Edit YAML" });
     expect(editYamlButton).toBeTruthy();
@@ -4250,9 +4407,13 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(readActionButtonNames()).toEqual([
       "Run",
       "Add node",
-      "Save",
+      "More workflow actions",
       "Edit YAML",
+      "Save",
     ]);
+    expect(screen.getByRole("button", { name: "Save" })).toHaveClass(
+      "ant-btn-primary",
+    );
 
     fireEvent.click(screen.getByRole("button", { name: "node:step:triage" }));
     openMoreActionsMenu();
@@ -5998,6 +6159,14 @@ describe("TeamMemberWorkflowStudioPage", () => {
       expect(screen.getByText("Published")).toBeTruthy();
       expect(screen.getByTitle(/Published member workflow is serviceable/)).toBeTruthy();
     });
+    expect(screen.getByRole("status", { name: "Workflow status" })).toHaveAttribute(
+      "aria-live",
+      "polite",
+    );
+    expect(screen.getByRole("status", { name: "Workflow status" })).toHaveAttribute(
+      "aria-atomic",
+      "true",
+    );
     expect(studioApi.setTeamEntryMember).not.toHaveBeenCalled();
   });
 
@@ -6063,7 +6232,7 @@ describe("TeamMemberWorkflowStudioPage", () => {
     expect(studioApi.bindMemberWorkflow).not.toHaveBeenCalled();
   });
 
-  it("reports rejected publish binding without introducing activation language", async () => {
+  it("preserves a rejected publish error until refresh confirms no active binding status", async () => {
     window.history.replaceState(
       {},
       "",
@@ -6134,6 +6303,44 @@ describe("TeamMemberWorkflowStudioPage", () => {
     });
     expect(screen.queryByTitle(/Activation/)).toBeNull();
     expect(studioApi.setTeamEntryMember).not.toHaveBeenCalled();
+
+    (studioApi.getMember as jest.Mock).mockRejectedValueOnce(
+      new StudioApiError("Member status refresh failed.", 502),
+    );
+    const refreshButton = screen.getByRole("button", { name: "Refresh status" });
+    await waitFor(() => {
+      expect(refreshButton).toBeEnabled();
+    });
+    const workflowRequestCountBeforeFailedRefresh = (
+      studioApi.getWorkflow as jest.Mock
+    ).mock.calls.length;
+    fireEvent.click(refreshButton);
+
+    expect(await screen.findByText("Member status refresh failed.")).toBeTruthy();
+    expect(studioApi.getMember).toHaveBeenCalledTimes(3);
+    expect(studioApi.getWorkflow).toHaveBeenCalledTimes(
+      workflowRequestCountBeforeFailedRefresh,
+    );
+    expect(screen.getByText("Error")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Refresh status" })).toBeEnabled();
+    expect(screen.queryByRole("button", { name: "Publish" })).toBeNull();
+    expect(
+      screen.queryByText("No published member status is visible yet."),
+    ).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Refresh status" }));
+
+    expect(
+      await screen.findByText("No published member status is visible yet."),
+    ).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByText("Draft")).toBeTruthy();
+      expect(screen.queryByText("Error")).toBeNull();
+      expect(screen.queryByRole("button", { name: "Refresh status" })).toBeNull();
+      expect(screen.getByRole("button", { name: "Publish" })).toBeEnabled();
+    });
+    expect(studioApi.getMember).toHaveBeenCalledTimes(4);
+    expect(studioApi.getMemberBindingRun).toHaveBeenCalledTimes(1);
   });
 
   it("stops local publish loading when binding remains in progress after the observation window", async () => {
diff --git a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.tsx b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.tsx
index d31c739702..4c5eceb16d 100644
--- a/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.tsx
+++ b/apps/aevatar-console-web/src/pages/team-member-workflow-studio/index.tsx
@@ -1,9 +1,12 @@
-import { Alert, Spin } from "antd";
+import { Alert, Grid, Spin } from "antd";
 import React from "react";
 import WorkflowStudioCanvas from "./components/WorkflowStudioCanvas";
 import WorkflowStudioExecutionPanel from "./components/WorkflowStudioExecutionPanel";
 import WorkflowStudioHeader from "./components/WorkflowStudioHeader";
-import WorkflowStudioNodeDetailPanel from "./components/WorkflowStudioNodeDetailPanel";
+import WorkflowStudioNodeDetailPanel, {
+  WORKFLOW_STUDIO_NODE_INSPECTOR_DEFAULT_WIDTH,
+  WORKFLOW_STUDIO_NODE_INSPECTOR_OVERLAY_INSET,
+} from "./components/WorkflowStudioNodeDetailPanel";
 import WorkflowStudioNodeLibrary from "./components/WorkflowStudioNodeLibrary";
 import WorkflowStudioDraftRunPanel from "./components/WorkflowStudioDraftRunPanel";
 import WorkflowStudioYamlPanel from "./components/WorkflowStudioYamlPanel";
@@ -47,6 +50,7 @@ function resolveExecutionPanelMaxHeight(container: HTMLElement | null) {
 
 const TeamMemberWorkflowStudioPage: React.FC = () => {
   const studio = useTeamMemberWorkflowStudio();
+  const screens = Grid.useBreakpoint();
   const mainRef = React.useRef<HTMLElement | null>(null);
   const editorRegionRef = React.useRef<HTMLElement | null>(null);
   const resizeCleanupRef = React.useRef<(() => void) | null>(null);
@@ -56,8 +60,16 @@ const TeamMemberWorkflowStudioPage: React.FC = () => {
   const [executionPanelHeight, setExecutionPanelHeight] = React.useState(
     EXECUTION_PANEL_DEFAULT_HEIGHT,
   );
+  const [nodeInspectorWidth, setNodeInspectorWidth] = React.useState(
+    WORKFLOW_STUDIO_NODE_INSPECTOR_DEFAULT_WIDTH,
+  );
   const sidePanelOpen = studio.draftRunPanelOpen || studio.yamlPanelOpen;
   const executionPanelOpen = Boolean(studio.executionDetail || studio.executionError);
+  const nodeInspectorOpen = !sidePanelOpen && Boolean(studio.selectedStepDraft);
+  const canvasRightInset =
+    screens.lg && nodeInspectorOpen
+      ? nodeInspectorWidth + WORKFLOW_STUDIO_NODE_INSPECTOR_OVERLAY_INSET * 2
+      : 0;
 
   React.useEffect(
     () => () => {
@@ -330,6 +342,7 @@ const TeamMemberWorkflowStudioPage: React.FC = () => {
             onNodeSelect={studio.selectNode}
             selectedEdgeId={studio.selectedEdgeId}
             selectedNodeId={studio.selectedNodeId}
+            viewportRightInset={canvasRightInset}
           />
         )}
         <WorkflowStudioNodeLibrary
@@ -407,7 +420,9 @@ const TeamMemberWorkflowStudioPage: React.FC = () => {
             onClose={studio.selectCanvas}
             onConfigurationChange={studio.updateSelectedStepConfiguration}
             onConfigurationErrorChange={studio.setSelectedStepConfigurationError}
+            onWidthChange={setNodeInspectorWidth}
             stepDraft={studio.selectedStepDraft}
+            width={nodeInspectorWidth}
           />
         )}
       </section>
diff --git a/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.test.tsx b/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.test.tsx
index 8315ac07c5..485f81800d 100644
--- a/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.test.tsx
+++ b/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.test.tsx
@@ -3,6 +3,23 @@ import { act, render, screen } from '@testing-library/react';
 import GraphCanvas from './GraphCanvas';
 
 const mockReactFlowRender = jest.fn();
+const mockControlsRender = jest.fn();
+const mockMiniMapRender = jest.fn();
+const mockFitView = jest.fn(() => Promise.resolve(true));
+const mockGetViewport = jest.fn();
+const mockSetViewport = jest.fn(
+  (
+    _viewport: { x: number; y: number; zoom: number },
+    _options?: { duration?: number },
+  ) => Promise.resolve(true),
+);
+const mockRequestAnimationFrame = jest.fn(
+  (callback: FrameRequestCallback): number => {
+    callback(0);
+    return 1;
+  },
+);
+let mockViewport = { x: 100, y: 40, zoom: 0.46 };
 
 jest.mock('@xyflow/react', () => {
   const React = require('react');
@@ -12,19 +29,39 @@ jest.mock('@xyflow/react', () => {
     Background: () => null,
     BackgroundVariant: {
       Dots: 'dots',
+      Lines: 'lines',
+    },
+    Controls: (props: unknown) => {
+      mockControlsRender(props);
+      return React.createElement('div', { 'data-testid': 'controls-mock' });
     },
-    Controls: () => null,
     Handle: () => null,
-    MiniMap: () => null,
+    MiniMap: (props: unknown) => {
+      mockMiniMapRender(props);
+      return React.createElement('div', { 'data-testid': 'minimap-mock' });
+    },
     Position: {
       Left: 'left',
       Right: 'right',
     },
-    ReactFlow: (props: unknown) => {
+    ReactFlow: (props: any) => {
       mockReactFlowRender(props);
-      return React.createElement('div', { 'data-testid': 'react-flow-mock' });
+      React.useEffect(() => {
+        props.onInit?.({
+          fitView: mockFitView,
+          getNodes: () => props.nodes ?? [],
+          getViewport: mockGetViewport,
+          screenToFlowPosition: ({ x, y }: { x: number; y: number }) => ({ x, y }),
+          setViewport: mockSetViewport,
+        });
+      }, [props.onInit]);
+      return React.createElement(
+        'div',
+        { 'data-testid': 'react-flow-mock' },
+        props.children,
+      );
     },
-    applyNodeChanges: jest.fn((changes, nodes) => nodes),
+    applyNodeChanges: jest.fn((_changes, nodes) => nodes),
     useEdgesState: (initialEdges: any[]) => React.useState(initialEdges),
     useNodesState: (initialNodes: any[]) => React.useState(initialNodes),
     useStore: (selector: any) => selector({ transform: [0, 0, 1] }),
@@ -62,7 +99,27 @@ describe('GraphCanvas', () => {
   ];
 
   beforeEach(() => {
+    mockViewport = { x: 100, y: 40, zoom: 0.46 };
+    mockControlsRender.mockClear();
+    mockFitView.mockClear();
+    mockGetViewport.mockReset();
+    mockGetViewport.mockImplementation(() => ({ ...mockViewport }));
+    mockMiniMapRender.mockClear();
     mockReactFlowRender.mockClear();
+    mockRequestAnimationFrame.mockClear();
+    mockSetViewport.mockReset();
+    mockSetViewport.mockImplementation((viewport) => {
+      mockViewport = { ...viewport };
+      return Promise.resolve(true);
+    });
+    Object.defineProperty(window, 'requestAnimationFrame', {
+      configurable: true,
+      value: mockRequestAnimationFrame,
+    });
+    Object.defineProperty(window, 'cancelAnimationFrame', {
+      configurable: true,
+      value: jest.fn(),
+    });
   });
 
   it('routes studio node deletion through the parent callback before mutating the graph', async () => {
@@ -145,4 +202,121 @@ describe('GraphCanvas', () => {
     expect(screen.getByText('LLM call')).toBeTruthy();
     expect(screen.queryByText('llm_call')).toBeNull();
   });
+
+  it('uses the same fit options for initial fit, automatic fit, and the fit-view control', () => {
+    render(
+      <GraphCanvas
+        autoFitKey="step:assert"
+        edges={edges}
+        nodes={nodes}
+        variant="studio"
+      />,
+    );
+
+    const reactFlowProps = mockReactFlowRender.mock.calls.at(-1)?.[0] as any;
+    const controlsProps = mockControlsRender.mock.calls.at(-1)?.[0] as any;
+    const expectedOptions = {
+      duration: 0,
+      maxZoom: 0.92,
+      minZoom: 0.14,
+      padding: 0.2,
+    };
+
+    expect(reactFlowProps.fitViewOptions).toEqual(expectedOptions);
+    expect(controlsProps.fitViewOptions).toBe(reactFlowProps.fitViewOptions);
+    expect(mockFitView).toHaveBeenCalledWith(reactFlowProps.fitViewOptions);
+  });
+
+  it('keeps the current zoom while recentering across inspector open, resize, and close', () => {
+    const renderCanvas = (viewportRightInset: number) => (
+      <GraphCanvas
+        edges={edges}
+        nodes={nodes}
+        variant="studio"
+        viewportRightInset={viewportRightInset}
+      />
+    );
+    const { rerender } = render(renderCanvas(0));
+
+    expect(mockSetViewport).not.toHaveBeenCalled();
+
+    rerender(renderCanvas(452));
+    expect(screen.getByTestId('graph-canvas-viewport')).toHaveStyle({
+      right: '452px',
+    });
+    expect(mockSetViewport).toHaveBeenLastCalledWith(
+      { x: -126, y: 40, zoom: 0.46 },
+      { duration: 0 },
+    );
+
+    rerender(renderCanvas(532));
+    expect(mockSetViewport).toHaveBeenLastCalledWith(
+      { x: -166, y: 40, zoom: 0.46 },
+      { duration: 0 },
+    );
+
+    rerender(renderCanvas(0));
+    expect(mockSetViewport).toHaveBeenLastCalledWith(
+      { x: 100, y: 40, zoom: 0.46 },
+      { duration: 0 },
+    );
+    expect(mockSetViewport).toHaveBeenCalledTimes(3);
+    expect(mockFitView).not.toHaveBeenCalled();
+  });
+
+  it('does not refit or move the viewport when only selection changes', () => {
+    const { rerender } = render(
+      <GraphCanvas
+        edges={edges}
+        nodes={nodes}
+        variant="studio"
+        viewportRightInset={452}
+      />,
+    );
+
+    mockFitView.mockClear();
+    mockSetViewport.mockClear();
+    rerender(
+      <GraphCanvas
+        edges={edges}
+        nodes={nodes}
+        selectedNodeId="step:assert"
+        variant="studio"
+        viewportRightInset={452}
+      />,
+    );
+
+    expect(mockFitView).not.toHaveBeenCalled();
+    expect(mockSetViewport).not.toHaveBeenCalled();
+  });
+
+  it('separates the controls from the minimap and uses the compact studio radii', () => {
+    const { container } = render(
+      <GraphCanvas edges={edges} nodes={nodes} variant="studio" />,
+    );
+
+    const graphViewport = screen.getByTestId('graph-canvas-viewport');
+    const graphSurface = graphViewport.parentElement;
+    const reactFlowProps = mockReactFlowRender.mock.calls.at(-1)?.[0] as any;
+    const controlsProps = mockControlsRender.mock.calls.at(-1)?.[0] as any;
+    const miniMapProps = mockMiniMapRender.mock.calls.at(-1)?.[0] as any;
+    const StudioNode = reactFlowProps.nodeTypes.studioWorkflowNode;
+    const nodeRender = render(
+      <StudioNode data={nodes[0].data} selected={false} />,
+    );
+    const nodeSurface = nodeRender.container.firstElementChild as HTMLElement;
+    const nodeHeader = nodeSurface.firstElementChild as HTMLElement;
+    const nodeIcon = nodeHeader.firstElementChild as HTMLElement;
+
+    expect(container).toContainElement(graphSurface);
+    expect(graphSurface).toHaveStyle({ borderRadius: '8px' });
+    expect(nodeSurface).toHaveStyle({ borderRadius: '8px' });
+    expect(nodeIcon).toHaveStyle({ borderRadius: '6px' });
+    expect(controlsProps.style).toEqual(
+      expect.objectContaining({ marginLeft: 16 }),
+    );
+    expect(miniMapProps.style).toEqual(
+      expect.objectContaining({ borderRadius: 8, marginLeft: 58 }),
+    );
+  });
 });
diff --git a/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.tsx b/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.tsx
index 6fc21bf456..82fee48be3 100644
--- a/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.tsx
+++ b/apps/aevatar-console-web/src/shared/graphs/GraphCanvas.tsx
@@ -39,6 +39,7 @@ type GraphCanvasProps = {
   edges: Edge[];
   height?: number | string;
   bottomInset?: number;
+  viewportRightInset?: number;
   overlayContent?: React.ReactNode;
   selectedNodeId?: string;
   selectedEdgeId?: string;
@@ -59,6 +60,10 @@ type GraphCanvasProps = {
 };
 
 const SELF_MANAGED_SELECTION_CLASS = 'graph-canvas-self-managed-selection';
+const STUDIO_CANVAS_RADIUS = 8;
+const STUDIO_NODE_ICON_RADIUS = 6;
+const STUDIO_CONTROLS_LEFT_INSET = 16;
+const STUDIO_MINIMAP_LEFT_INSET = 58;
 const selfManagedSelectionCss = `
 .react-flow__node.${SELF_MANAGED_SELECTION_CLASS},
 .react-flow__node.${SELF_MANAGED_SELECTION_CLASS}.selected,
@@ -112,7 +117,7 @@ function StudioWorkflowNode({
     <div
       style={{
         width,
-        borderRadius: 24,
+        borderRadius: STUDIO_CANVAS_RADIUS,
         overflow: 'hidden',
         border: `1px solid ${selected ? category.color : '#E8E2D9'}`,
         background: '#FFFFFF',
@@ -147,7 +152,7 @@ function StudioWorkflowNode({
           style={{
             alignItems: 'center',
             background: `${category.color}18`,
-            borderRadius: 14,
+            borderRadius: STUDIO_NODE_ICON_RADIUS,
             color: category.color,
             display: 'flex',
             flexShrink: 0,
@@ -262,6 +267,7 @@ const GraphCanvas: React.FC<GraphCanvasProps> = ({
   edges,
   height = 420,
   bottomInset = 0,
+  viewportRightInset = 0,
   overlayContent,
   selectedNodeId,
   selectedEdgeId,
@@ -280,6 +286,13 @@ const GraphCanvas: React.FC<GraphCanvasProps> = ({
   const [flowInstance, setFlowInstance] =
     React.useState<ReactFlowInstance | null>(null);
   const isStudioVariant = variant === 'studio';
+  const studioViewportRightInset =
+    isStudioVariant &&
+    Number.isFinite(viewportRightInset) &&
+    viewportRightInset > 0
+      ? viewportRightInset
+      : 0;
+  const previousViewportRightInsetRef = React.useRef(studioViewportRightInset);
   const studioFitViewOptions = React.useMemo(
     () => ({
       padding: 0.2,
@@ -290,6 +303,26 @@ const GraphCanvas: React.FC<GraphCanvasProps> = ({
     [],
   );
 
+  React.useLayoutEffect(() => {
+    const previousInset = previousViewportRightInsetRef.current;
+    const insetDelta = studioViewportRightInset - previousInset;
+    previousViewportRightInsetRef.current = studioViewportRightInset;
+
+    if (!flowInstance || !isStudioVariant || insetDelta === 0) {
+      return;
+    }
+
+    const viewport = flowInstance.getViewport();
+    void flowInstance.setViewport(
+      {
+        x: viewport.x - insetDelta / 2,
+        y: viewport.y,
+        zoom: viewport.zoom,
+      },
+      { duration: 0 },
+    );
+  }, [flowInstance, isStudioVariant, studioViewportRightInset]);
+
   useEffect(() => {
     setLocalNodes(nodes);
   }, [nodes, setLocalNodes]);
@@ -405,8 +438,9 @@ const GraphCanvas: React.FC<GraphCanvasProps> = ({
   return (
     <div
       style={{
+        background: isStudioVariant ? '#FBFBFC' : undefined,
         border: isStudioVariant ? '1px solid #E8E2D9' : '1px solid #f0f0f0',
-        borderRadius: isStudioVariant ? 24 : 8,
+        borderRadius: 8,
         height,
         minHeight: 0,
         overflow: 'hidden',
@@ -415,140 +449,153 @@ const GraphCanvas: React.FC<GraphCanvasProps> = ({
       }}
     >
       {!isStudioVariant ? <style>{selfManagedSelectionCss}</style> : null}
-      <ReactFlow
-        onInit={setFlowInstance}
-        nodes={decoratedNodes}
-        edges={decoratedEdges}
-        fitView
-        fitViewOptions={
-          isStudioVariant ? studioFitViewOptions : undefined
-        }
-        minZoom={isStudioVariant ? 0.14 : undefined}
-        maxZoom={isStudioVariant ? 1.6 : undefined}
-        nodeTypes={
-          isStudioVariant
-            ? {
-                studioWorkflowNode: StudioWorkflowNode,
-              }
-            : undefined
-        }
-        nodesDraggable={isStudioVariant}
-        nodesConnectable={Boolean(isStudioVariant && onConnectNodes)}
-        elementsSelectable
-        deleteKeyCode={
-          isStudioVariant && !onDeleteNodes && !onDeleteEdges ? null : undefined
-        }
-        onNodesChange={isStudioVariant ? handleNodesChange : undefined}
-        onBeforeDelete={
-          isStudioVariant && (onDeleteNodes || onDeleteEdges)
-            ? async ({ edges: edgesToDelete, nodes: nodesToDelete }) => {
-                const nodeIds = nodesToDelete
-                  .map((node) => String(node.id ?? '').trim())
-                  .filter(Boolean);
-                const edgeIds = edgesToDelete
-                  .map((edge) => String(edge.id ?? '').trim())
-                  .filter(Boolean);
-                if (nodeIds.length === 0 && edgeIds.length === 0) {
-                  return false;
+      <div
+        data-testid="graph-canvas-viewport"
+        style={{
+          bottom: 0,
+          left: 0,
+          minWidth: 0,
+          position: 'absolute',
+          right: studioViewportRightInset,
+          top: 0,
+        }}
+      >
+        <ReactFlow
+          onInit={setFlowInstance}
+          nodes={decoratedNodes}
+          edges={decoratedEdges}
+          fitView
+          fitViewOptions={isStudioVariant ? studioFitViewOptions : undefined}
+          minZoom={isStudioVariant ? 0.14 : undefined}
+          maxZoom={isStudioVariant ? 1.6 : undefined}
+          nodeTypes={
+            isStudioVariant
+              ? {
+                  studioWorkflowNode: StudioWorkflowNode,
                 }
-
-                try {
-                  if (nodeIds.length > 0) {
-                    await onDeleteNodes?.(nodeIds);
+              : undefined
+          }
+          nodesDraggable={isStudioVariant}
+          nodesConnectable={Boolean(isStudioVariant && onConnectNodes)}
+          elementsSelectable
+          deleteKeyCode={
+            isStudioVariant && !onDeleteNodes && !onDeleteEdges ? null : undefined
+          }
+          onNodesChange={isStudioVariant ? handleNodesChange : undefined}
+          onBeforeDelete={
+            isStudioVariant && (onDeleteNodes || onDeleteEdges)
+              ? async ({ edges: edgesToDelete, nodes: nodesToDelete }) => {
+                  const nodeIds = nodesToDelete
+                    .map((node) => String(node.id ?? '').trim())
+                    .filter(Boolean);
+                  const edgeIds = edgesToDelete
+                    .map((edge) => String(edge.id ?? '').trim())
+                    .filter(Boolean);
+                  if (nodeIds.length === 0 && edgeIds.length === 0) {
+                    return false;
                   }
-                  if (edgeIds.length > 0) {
-                    await onDeleteEdges?.(edgeIds);
+
+                  try {
+                    if (nodeIds.length > 0) {
+                      await onDeleteNodes?.(nodeIds);
+                    }
+                    if (edgeIds.length > 0) {
+                      await onDeleteEdges?.(edgeIds);
+                    }
+                  } catch {
+                    // Keep the local graph unchanged until the parent document confirms deletion.
                   }
-                } catch {
-                  // Keep the local graph unchanged until the parent document confirms deletion.
-                }
 
-                return false;
-              }
-            : undefined
-        }
-        onNodeDragStop={
-          isStudioVariant
-            ? () =>
-                onNodeLayoutChange?.(
-                  (flowInstance?.getNodes() as Node[]) ?? localNodes,
-                )
-            : undefined
-        }
-        onConnect={
-          isStudioVariant
-            ? (connection) => {
-                if (!connection.source || !connection.target) {
-                  return;
+                  return false;
                 }
+              : undefined
+          }
+          onNodeDragStop={
+            isStudioVariant
+              ? () =>
+                  onNodeLayoutChange?.(
+                    (flowInstance?.getNodes() as Node[]) ?? localNodes,
+                  )
+              : undefined
+          }
+          onConnect={
+            isStudioVariant
+              ? (connection) => {
+                  if (!connection.source || !connection.target) {
+                    return;
+                  }
 
-                onConnectNodes?.(connection.source, connection.target);
-              }
-            : undefined
-        }
-        onNodeClick={(_, node) => onNodeSelect?.(node.id)}
-        onEdgeClick={(_, edge) => onEdgeSelect?.(edge.id)}
-        onPaneClick={() => onCanvasSelect?.()}
-        onPaneContextMenu={
-          isStudioVariant
-            ? (event) => {
-                event.preventDefault();
-                const flowPosition = flowInstance?.screenToFlowPosition({
-                  x: event.clientX,
-                  y: event.clientY,
-                }) ?? { x: 420, y: 220 };
-                onCanvasContextMenu?.({
-                  clientX: event.clientX,
-                  clientY: event.clientY,
-                  flowX: flowPosition.x,
-                  flowY: flowPosition.y,
-                });
-              }
-            : undefined
-        }
-        className={isStudioVariant ? 'studio-canvas' : undefined}
-      >
-        <Background
-          color={isStudioVariant ? '#D8D2C8' : undefined}
-          variant={isStudioVariant ? BackgroundVariant.Dots : BackgroundVariant.Lines}
-          gap={isStudioVariant ? 24 : 16}
-          size={isStudioVariant ? 1 : 1}
-        />
-        {isStudioVariant ? (
-          <>
-            <MiniMap
-              position="bottom-left"
-              zoomable
-              pannable
-              style={{
-                background: 'rgba(248, 247, 244, 0.98)',
-                border: '1px solid #E8E2D9',
-                borderRadius: 18,
-                height: 108,
-                marginBottom: 24 + bottomInset,
-                marginLeft: 16,
-                width: 164,
-              }}
-              maskColor="rgba(255, 255, 255, 0.76)"
-              bgColor="rgba(248, 247, 244, 0.98)"
-              nodeBorderRadius={8}
-              nodeColor={(node) => {
-                const data = node.data as StudioGraphNodeData | undefined;
-                return getStudioGraphCategory(data?.stepType || '').color;
-              }}
-            />
-            <Controls
-              position="bottom-left"
-              style={{
-                marginBottom: 20 + bottomInset,
-                marginLeft: 16,
-              }}
-            />
-          </>
-        ) : (
-          <Controls showInteractive={false} />
-        )}
-      </ReactFlow>
+                  onConnectNodes?.(connection.source, connection.target);
+                }
+              : undefined
+          }
+          onNodeClick={(_, node) => onNodeSelect?.(node.id)}
+          onEdgeClick={(_, edge) => onEdgeSelect?.(edge.id)}
+          onPaneClick={() => onCanvasSelect?.()}
+          onPaneContextMenu={
+            isStudioVariant
+              ? (event) => {
+                  event.preventDefault();
+                  const flowPosition = flowInstance?.screenToFlowPosition({
+                    x: event.clientX,
+                    y: event.clientY,
+                  }) ?? { x: 420, y: 220 };
+                  onCanvasContextMenu?.({
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                    flowX: flowPosition.x,
+                    flowY: flowPosition.y,
+                  });
+                }
+              : undefined
+          }
+          className={isStudioVariant ? 'studio-canvas' : undefined}
+        >
+          <Background
+            color={isStudioVariant ? '#D8D2C8' : undefined}
+            variant={
+              isStudioVariant ? BackgroundVariant.Dots : BackgroundVariant.Lines
+            }
+            gap={isStudioVariant ? 24 : 16}
+            size={1}
+          />
+          {isStudioVariant ? (
+            <>
+              <MiniMap
+                position="bottom-left"
+                zoomable
+                pannable
+                style={{
+                  background: 'rgba(248, 247, 244, 0.98)',
+                  border: '1px solid #E8E2D9',
+                  borderRadius: STUDIO_CANVAS_RADIUS,
+                  height: 108,
+                  marginBottom: 24 + bottomInset,
+                  marginLeft: STUDIO_MINIMAP_LEFT_INSET,
+                  width: 164,
+                }}
+                maskColor="rgba(255, 255, 255, 0.76)"
+                bgColor="rgba(248, 247, 244, 0.98)"
+                nodeBorderRadius={8}
+                nodeColor={(node) => {
+                  const data = node.data as StudioGraphNodeData | undefined;
+                  return getStudioGraphCategory(data?.stepType || '').color;
+                }}
+              />
+              <Controls
+                fitViewOptions={studioFitViewOptions}
+                position="bottom-left"
+                style={{
+                  marginBottom: 20 + bottomInset,
+                  marginLeft: STUDIO_CONTROLS_LEFT_INSET,
+                }}
+              />
+            </>
+          ) : (
+            <Controls showInteractive={false} />
+          )}
+        </ReactFlow>
+      </div>
       {overlayContent}
     </div>
   );
diff --git a/apps/aevatar-console-web/src/shared/navigation/navigationGroups.tsx b/apps/aevatar-console-web/src/shared/navigation/navigationGroups.tsx
index 354e115de0..6a021ccd99 100644
--- a/apps/aevatar-console-web/src/shared/navigation/navigationGroups.tsx
+++ b/apps/aevatar-console-web/src/shared/navigation/navigationGroups.tsx
@@ -1,12 +1,12 @@
 import {
   DashboardOutlined,
+  MessageOutlined,
   SettingOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
 import React from "react";
 
 export type NavigationGroup = {
-  flattenSingleItemAsGroupLabel?: boolean;
   flattenSingleItem?: boolean;
   icon?: React.ReactNode;
   key: string;
@@ -22,8 +22,8 @@ const TEAM_FIRST_NAVIGATION_GROUP_ORDER: readonly NavigationGroup[] = [
     labelMessageId: "nav.groups.teams",
   },
   {
-    flattenSingleItemAsGroupLabel: true,
     flattenSingleItem: true,
+    icon: <MessageOutlined />,
     key: "chat",
     label: "Chat",
     labelMessageId: "nav.groups.chat",
diff --git a/apps/aevatar-console-web/src/shared/navigation/navigationMenuGrouping.ts b/apps/aevatar-console-web/src/shared/navigation/navigationMenuGrouping.ts
index a3c920e4e0..1cbb624f67 100644
--- a/apps/aevatar-console-web/src/shared/navigation/navigationMenuGrouping.ts
+++ b/apps/aevatar-console-web/src/shared/navigation/navigationMenuGrouping.ts
@@ -52,13 +52,8 @@ export function groupNavigationMenuItems(
     if (group.flattenSingleItem && children.length === 1) {
       result.push({
         ...children[0],
-        icon: group.flattenSingleItemAsGroupLabel
-          ? children[0].icon
-          : (children[0].icon ?? group.icon),
+        icon: children[0].icon ?? group.icon,
         menuGroupKey: group.key,
-        name: group.flattenSingleItemAsGroupLabel
-          ? renderGroupLabel(group)
-          : children[0].name,
       });
       return result;
     }
diff --git a/apps/aevatar-console-web/src/shared/navigation/navigationMenuSelection.test.ts b/apps/aevatar-console-web/src/shared/navigation/navigationMenuSelection.test.ts
index be8727e838..ca4d02ad6c 100644
--- a/apps/aevatar-console-web/src/shared/navigation/navigationMenuSelection.test.ts
+++ b/apps/aevatar-console-web/src/shared/navigation/navigationMenuSelection.test.ts
@@ -1,6 +1,10 @@
 import { getNavigationSelectedKeys } from "./navigationMenuSelection";
 
 describe("getNavigationSelectedKeys", () => {
+  it("selects Chat for its primary route", () => {
+    expect(getNavigationSelectedKeys("/chat")).toEqual(["/chat"]);
+  });
+
   it("does not select a primary navigation item for removed Team compatibility routes", () => {
     expect(getNavigationSelectedKeys("/teams/new")).toEqual([]);
   });