feat(FN-2599): merge fusion/fn-2599

packages/dashboard/app/components/TaskDetailModal.css

@@ -321,6 +321,9 @@
 }
 
 .agent-log-model-header-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
   margin-left: auto;
 }
 
@@ -389,7 +392,12 @@
 
 /* Agent Log markdown/plain-text mode toggle */
 .agent-log-mode-toggle {
-  padding: 3px 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: calc(var(--space-xl) + var(--space-xl) + var(--space-xs));
+  min-height: calc(var(--space-lg) + var(--space-lg) + var(--space-xs));
+  padding: var(--space-xs) var(--space-sm);
   font-size: 11px;
   font-weight: 500;
   color: var(--text-muted);
@@ -397,7 +405,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--transition-fast);
   line-height: 1;
 }
 

packages/dashboard/app/components/__tests__/AgentLogViewer.test.tsx

@@ -2,6 +2,8 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { AgentLogViewer } from "../AgentLogViewer";
 import type { AgentLogEntry } from "@fusion/core";
+import "../../styles.css";
+import "../TaskDetailModal.css";
 
 // Mock lucide-react icons used by AgentLogViewer and ProviderIcon
 vi.mock("lucide-react", () => ({
@@ -1252,6 +1254,35 @@ describe("AgentLogViewer", () => {
   });
 
   describe("fullscreen toggle", () => {
+    it("applies matching min dimensions to markdown and fullscreen header toggles", () => {
+      const entries = [makeEntry()];
+      const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
+      const markdownToggle = container.querySelector(
+        "[data-testid='agent-log-mode-toggle']",
+      ) as HTMLButtonElement;
+      const fullscreenToggle = container.querySelector(
+        "[data-testid='agent-log-fullscreen-toggle']",
+      ) as HTMLButtonElement;
+
+      const markdownStyle = getComputedStyle(markdownToggle);
+      const fullscreenStyle = getComputedStyle(fullscreenToggle);
+
+      expect(markdownStyle.minWidth).toBe(fullscreenStyle.minWidth);
+      expect(markdownStyle.minHeight).toBe(fullscreenStyle.minHeight);
+      expect(markdownStyle.minWidth).not.toBe("0px");
+      expect(markdownStyle.minHeight).not.toBe("0px");
+    });
+
+    it("adds visible gap spacing between header toggle buttons", () => {
+      const entries = [makeEntry()];
+      const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
+      const toggleGroup = container.querySelector(".agent-log-model-header-toggle") as HTMLElement;
+      const toggleGroupStyle = getComputedStyle(toggleGroup);
+
+      expect(toggleGroupStyle.gap).not.toBe("");
+      expect(toggleGroupStyle.gap).not.toBe("normal");
+    });
+
     it("renders the fullscreen toggle button in the model info header", () => {
       const entries = [makeEntry()];
       const { container } = render(<AgentLogViewer entries={entries} loading={false} />);