refactor(devti): optimize task section and step panel layout

- Adjusted spacing and padding for a more compact view
- Improved title and text truncation for better readability
- Enhanced scroll pane settings for smoother scrolling
- Refined button sizes and positions
- Updated font sizes and styles for consistency

Author: phodal

core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskSectionPanel.kt

@@ -38,13 +38,15 @@ class TaskSectionPanel(
     private var expandButton: JButton? = null
     private var statusLabel: JLabel? = null
     private var progressLabel: JLabel? = null
+    private val scrollPane: JBScrollPane
+    private val MAX_TITLE_LENGTH = 50
 
     init {
         layout = BorderLayout()
         background = JBUI.CurrentTheme.ToolWindow.background()
         border = CompoundBorder(
             BorderFactory.createMatteBorder(0, 0, 1, 0, JBColor.border()),
-            JBUI.Borders.empty(8, 16, 8, 16)
+            JBUI.Borders.empty(4, 16)
         )
 
         val headerPanel = createHeaderPanel()
@@ -54,14 +56,15 @@ class TaskSectionPanel(
         stepsPanel.background = JBUI.CurrentTheme.ToolWindow.background()
         stepsPanel.border = JBUI.Borders.emptyLeft(24)
 
-        // Add steps to the steps panel
         refreshStepsPanel()
 
-        // Create a scroll pane for the steps
-        val scrollPane = JBScrollPane(stepsPanel)
-        scrollPane.border = BorderFactory.createEmptyBorder()
-        scrollPane.isOpaque = false
-        scrollPane.viewport.isOpaque = false
+        scrollPane = JBScrollPane(stepsPanel).apply {
+            border = BorderFactory.createEmptyBorder()
+            isOpaque = false
+            viewport.isOpaque = false
+            horizontalScrollBarPolicy = ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER
+            verticalScrollBarPolicy = ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED
+        }
 
         add(scrollPane, BorderLayout.CENTER)
 
@@ -82,23 +85,23 @@ class TaskSectionPanel(
 
         // Expand/collapse button
         expandButton = JButton(if (isExpanded) "▼" else "▶").apply {
-            preferredSize = Dimension(24, 24)
+            preferredSize = Dimension(20, 20)  // Slightly smaller button
             margin = JBUI.insets(0)
             isBorderPainted = false
             isContentAreaFilled = false
             toolTipText = if (isExpanded) "Collapse section" else "Expand section"
 
-            addActionListener {
+            addActionListener { e ->
                 isExpanded = !isExpanded
                 text = if (isExpanded) "▼" else "▶"
                 toolTipText = if (isExpanded) "Collapse section" else "Expand section"
                 toggleStepsVisibility(isExpanded)
+                e.source = this  // Ensure event propagation
             }
         }
 
         leftPanel.add(expandButton)
 
-        // Status icon
         val statusIcon = when (planItem.status) {
             TaskStatus.COMPLETED -> JLabel(AutoDevIcons.Checked)
             TaskStatus.FAILED -> JLabel(AutoDevIcons.Error)
@@ -107,18 +110,23 @@ class TaskSectionPanel(
         }
         leftPanel.add(statusIcon)
 
-        // Title with section number
-        val titleLabel = JLabel("${index + 1}. ${planItem.title}").apply {
+        val fullTitle = "${index + 1}. ${planItem.title}"
+        val displayTitle = if (planItem.title.length > MAX_TITLE_LENGTH) {
+            "${index + 1}. ${planItem.title.take(MAX_TITLE_LENGTH)}..."
+        } else {
+            fullTitle
+        }
+        
+        val titleLabel = JLabel(displayTitle).apply {
             font = font.deriveFont(Font.BOLD)
+            toolTipText = fullTitle // Show full title on hover
         }
         leftPanel.add(titleLabel)
 
-        // Right side with status, progress and action buttons
         val rightPanel = JPanel(FlowLayout(FlowLayout.RIGHT, 5, 0)).apply {
             isOpaque = false
         }
 
-        // Progress indicator
         val completedSteps = planItem.steps.count { it.completed }
         val totalSteps = planItem.steps.size
         val progressPercentage = if (totalSteps > 0) (completedSteps * 100) / totalSteps else 0
@@ -129,7 +137,6 @@ class TaskSectionPanel(
         }
         rightPanel.add(progressLabel)
 
-        // Status label
         statusLabel = JLabel(getStatusText(planItem.status)).apply {
             foreground = getStatusColor(planItem.status)
             font = font.deriveFont(Font.BOLD, 11f)
@@ -158,23 +165,11 @@ class TaskSectionPanel(
     }
 
     private fun toggleStepsVisibility(visible: Boolean) {
-        stepsPanel.isVisible = visible
-        revalidate()
-        repaint()
-        
-        stepsPanel.addComponentListener(object : ComponentAdapter() {
-            override fun componentShown(e: ComponentEvent) {
-                UIUtil.invokeLaterIfNeeded {
-                    parent.revalidate()
-                }
-            }
-            
-            override fun componentHidden(e: ComponentEvent) {
-                UIUtil.invokeLaterIfNeeded {
-                    parent.revalidate()
-                }
-            }
-        })
+        scrollPane.isVisible = visible
+        SwingUtilities.invokeLater {
+            parent?.revalidate()
+            parent?.repaint()
+        }
     }
 
     private fun refreshStepsPanel() {
@@ -188,7 +183,7 @@ class TaskSectionPanel(
             }
 
             stepsPanel.add(taskStepPanel)
-            stepsPanel.add(Box.createVerticalStrut(4))
+            stepsPanel.add(Box.createVerticalStrut(2))  // Reduced spacing between steps
         }
     }
 
@@ -247,3 +242,4 @@ class TaskSectionPanel(
         }
     }
 }
+

core/src/main/kotlin/cc/unitmesh/devti/sketch/ui/plan/TaskStepPanel.kt

@@ -40,17 +40,18 @@ class TaskStepPanel(
     private val doc: StyledDocument
     private val linkMap = mutableMapOf<IntRange, String>()
     private var statusLabel: JLabel? = null
+    private val MAX_TEXT_LENGTH = 100 // Maximum characters to display before truncating
 
     init {
         layout = BorderLayout()
         background = JBUI.CurrentTheme.ToolWindow.background()
         border = CompoundBorder(
             BorderFactory.createMatteBorder(0, 0, 1, 0, JBColor(0xE5E5E5, 0x323232)),
-            JBUI.Borders.empty(6, 4)
+            JBUI.Borders.empty(3, 2)  // Reduced padding for more compact view
         )
 
-        // Left panel for status icon
-        val leftPanel = JPanel(FlowLayout(FlowLayout.LEFT, 5, 0)).apply {
+        // Left panel for status icon with reduced spacing
+        val leftPanel = JPanel(FlowLayout(FlowLayout.LEFT, 2, 0)).apply {
             isOpaque = false
         }
 
@@ -67,22 +68,21 @@ class TaskStepPanel(
             add(taskLabel, BorderLayout.CENTER)
         }
 
-        // Right panel for status and action buttons
-        val rightPanel = JPanel(FlowLayout(FlowLayout.RIGHT, 5, 0)).apply {
+        val rightPanel = JPanel(FlowLayout(FlowLayout.RIGHT, 2, 0)).apply {
             isOpaque = false
         }
 
         statusLabel = JLabel(getStatusText(task.status)).apply {
             foreground = getStatusColor(task.status)
-            font = font.deriveFont(Font.PLAIN, 10f)
-            border = JBUI.Borders.empty(2, 5)
+            font = font.deriveFont(Font.PLAIN, 9f)
+            border = JBUI.Borders.empty(1, 3)
         }
         rightPanel.add(statusLabel)
 
         if (task.status == TaskStatus.TODO || task.status == TaskStatus.FAILED) {
             val executeButton = JButton(AutoDevIcons.Run).apply {
-                preferredSize = Dimension(24, 24)
-                margin = JBUI.insets(0)
+                preferredSize = Dimension(20, 20)
+                margin = JBUI.emptyInsets()
                 isBorderPainted = false
                 isContentAreaFilled = false
                 toolTipText = "Execute this step"
@@ -93,8 +93,8 @@ class TaskStepPanel(
 
         if (task.status == TaskStatus.FAILED) {
             val retryButton = JButton("Retry").apply {
-                margin = JBUI.insets(0, 3)
-                font = font.deriveFont(Font.PLAIN, 10f)
+                margin = JBUI.insets(0, 2)  // Less margin
+                font = font.deriveFont(Font.PLAIN, 9f)  // Smaller font size
                 addActionListener { executeTask() }
             }
             rightPanel.add(retryButton)
@@ -105,13 +105,25 @@ class TaskStepPanel(
         add(rightPanel, BorderLayout.EAST)
 
         setupContextMenu()
+
+        // Set preferred size for compact view
+        preferredSize = Dimension(preferredSize.width, Math.min(preferredSize.height, 28))
     }
 
     private fun createStatusIcon(): JComponent {
         return when (task.status) {
-            TaskStatus.COMPLETED -> JLabel(AutoDevIcons.Checked)
-            TaskStatus.FAILED -> JLabel(AutoDevIcons.Error)
-            TaskStatus.IN_PROGRESS -> JLabel(AutoDevIcons.Build)
+            TaskStatus.COMPLETED -> JLabel(AutoDevIcons.Checked).apply {
+                preferredSize = Dimension(16, 16)
+            }
+
+            TaskStatus.FAILED -> JLabel(AutoDevIcons.Error).apply {
+                preferredSize = Dimension(16, 16)
+            }
+
+            TaskStatus.IN_PROGRESS -> JLabel(AutoDevIcons.Build).apply {
+                preferredSize = Dimension(16, 16)
+            }
+
             TaskStatus.TODO -> JCheckBox().apply {
                 isSelected = task.completed
                 addActionListener {
@@ -124,6 +136,7 @@ class TaskStepPanel(
                 isBorderPainted = false
                 isContentAreaFilled = false
                 background = JBUI.CurrentTheme.ToolWindow.background()
+                preferredSize = Dimension(16, 16)
             }
         }
     }
@@ -132,13 +145,13 @@ class TaskStepPanel(
         val editorColorsManager = EditorColorsManager.getInstance()
         val currentScheme = editorColorsManager.schemeForCurrentUITheme
         val editorFontName = currentScheme.editorFontName
-        val editorFontSize = currentScheme.editorFontSize
+        val editorFontSize = currentScheme.editorFontSize - 1  // Slightly smaller font
 
         return JTextPane().apply {
             isEditable = false
             isOpaque = false
             background = JBUI.CurrentTheme.ToolWindow.background()
-            border = JBUI.Borders.emptyLeft(5)
+            border = JBUI.Borders.emptyLeft(3)  // Less left padding
             font = Font(editorFontName, Font.PLAIN, editorFontSize)
             foreground = UIUtil.getLabelForeground()
 
@@ -175,6 +188,15 @@ class TaskStepPanel(
         var text = task.step
         var currentPos = 0
 
+        taskLabel.toolTipText = text
+        val needsTruncation = text.length > MAX_TEXT_LENGTH && task.codeFileLinks.isEmpty()
+        if (needsTruncation && task.codeFileLinks.isEmpty()) {
+            val truncatedText = text.take(MAX_TEXT_LENGTH) + "..."
+            doc.insertString(0, truncatedText, getStyleForStatus(task.status))
+            return
+        }
+
+        // If we have links or the text is short enough, use the normal rendering logic
         task.codeFileLinks.forEach { link ->
             val linkPattern = "[${link.displayText}](${link.filePath})"
             val linkIndex = text.indexOf(linkPattern)
@@ -198,6 +220,9 @@ class TaskStepPanel(
         }
 
         if (text.isNotEmpty()) {
+            if (text.length > MAX_TEXT_LENGTH) {
+                text = text.take(MAX_TEXT_LENGTH) + "..."
+            }
             doc.insertString(currentPos, text, getStyleForStatus(task.status))
         }
     }