refactor(ui): improve task panel layout and text rendering

#331

- Update TaskPanel layout to BorderLayout for better icon and label placement
- Improve text wrapping and vertical alignment in task labels
- Adjust styling for section titles and task descriptions
- Update sketch.vm to provide clearer instructions and examples
```
refactor(ui): improve layout and text wrapping in task and section panels

- Set `isOpaque` to true for better panel visibility.
- Adjust layout to use `BorderLayout` for better organization.
- Improve text wrapping in task labels with HTML formatting.
- Simplify and clean up UI component initialization.

Author: phodal

core/src/main/kotlin/cc/unitmesh/devti/gui/AutoDevPlanerToolWindowFactory.kt

@@ -1,6 +1,7 @@
 package cc.unitmesh.devti.gui
 
 import cc.unitmesh.devti.observer.plan.AgentTaskEntry
+import cc.unitmesh.devti.observer.plan.MarkdownPlanParser
 import cc.unitmesh.devti.observer.plan.PlanUpdateListener
 import cc.unitmesh.devti.sketch.ui.plan.PlanSketch
 import com.intellij.openapi.Disposable
@@ -54,7 +55,30 @@ class AutoDevPlanerTooWindow(val project: Project) : SimpleToolWindowPanel(true,
     override fun getName(): @NlsActions.ActionText String? = "AutoDev Planer"
     var connection = ApplicationManager.getApplication().messageBus.connect(this)
 
-    var planSketch: PlanSketch = PlanSketch(project, "", mutableListOf(), true)
+    val content = """1. 更新实体类 BlogPost
+    - [✓] 添加 category 字段
+    - [✓] 更新构造函数
+    - [✓] 添加 getter 和 setter
+
+2. 更新 DTO 类 CreateBlogRequest
+    - [✓] 添加 category 字段
+
+3. 更新 BlogService
+    - [✓] 确保 createBlog 方法正确处理 category 字段
+
+4. 更新 BlogRepository
+    - [✓] 添加 findByCategory 方法
+
+5. 更新 BlogController
+    - [✓] 添加按 category 查询的 API 端点
+    - [✓] 更新 Swagger 文档
+
+6. 测试验证
+    - [ ] 编写 Postman 测试用例
+    - [ ] 创建带 category 参数的集成测试
+    - [ ] 验证空分类场景处理
+"""
+    var planSketch: PlanSketch = PlanSketch(project, content, MarkdownPlanParser.parse(content).toMutableList(), true)
 
     init {
         val planPanel = panel {

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

@@ -33,13 +33,14 @@ class SectionPanel(
         val titlePanel = createSectionTitlePanel()
         add(titlePanel)
 
-        // Add all tasks in this section
         planItem.steps.forEach { task ->
             add(TaskPanel(project, task) {
                 updateSectionStatus()
                 onStatusChange()
             })
         }
+
+        revalidate()
     }
 
     private fun createSectionTitlePanel(): JPanel {

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

@@ -41,7 +41,6 @@ class TaskPanel(
         }
 
         add(taskLabel)
-
         setupContextMenu()
     }
 

core/src/main/resources/genius/zh/code/sketch.vm

@@ -1,15 +1,12 @@
-You are Sketch, a open-source agentic AI coding assistant designed by the Unit Mesh.
+You are Sketch, a open-source agentic AI driven autonomous programmer designed by the Unit Mesh.
 
-Exclusively available in Sketch, you operate on the revolutionary AI Flow paradigm,
-enabling you to work both independently and collaboratively with a USER.
-
-You are pair programming with a USER to solve their coding task. The task may require creating a new codebase,
-modifying or debugging an existing codebase, or simply answering a question. Each time the USER sends a message,
-you need to ask some information about their current state, such as what files they have open,
-where their cursor is, recently viewed files, edit history in their session so far, linter errors, and more.
+- You operate on the revolutionary AI Flow paradigm  solve user coding task. The task may require creating a new codebase,
+modifying or debugging an existing codebase, or simply answering a question.
+- Your main goal is to follow the USER's instructions at each message.
+- You have tools at your disposal to solve the coding task. We design a DSL call DevIn for you to call tools. If the USER's
+task is general or you already know the answer, just respond without calling tools.
 
-This information may or may not be relevant to the coding task, it is up for you to decide.
-Your main goal is to follow the USER's instructions at each message.
+Here is basic information about the current workspace:
 
 - The USER's OS version is ${context.os}
 - The absolute path of the USER's workspaces is: ${context.workspace}
@@ -18,11 +15,8 @@ Your main goal is to follow the USER's instructions at each message.
 - User's workspace context is: ${context.frameworkContext}
 - Current time is: ${context.time}
 
-You have tools at your disposal to solve the coding task. We design a DSL call DevIn for you to call tools. If the USER's
-task is general or you already know the answer, just respond without calling tools.
-
-If you need more context, you should call tool (send DevIn code) to get the context information. When the USER provides
-enough context, you can start coding directly.
+在编码之前，请确保您拥有足够的上下文信息。请遵循 DevIn <devin /> 指令编写代码，以节省用户的时间。请不要直接基于用户的问题进行编码，而是先通过
+tool calls 获取上下文信息来了解用户的代码库。
 
 <tool_calling>
 Follow these rules regarding tool calls:
@@ -42,17 +36,16 @@ say 'I will edit your file'.
 5. Before calling each tool, first explain to the USER why you are calling it.
 </tool_calling>
 
-Here is an example output to the USER:
+示例如下:
 
 <example id="not-enough-context">
 <user.question>
-You are helping the USER create a python-based photo storage app. You
-have created a routes.py and main.js file, and updated the main.html file.
+创建基于 Python 的照片存储应用程序
 </user.question>
 <you.answer.step1>
+// 不要直接基于用户的问题进行编码，这是在浪费用户的时间。
 // First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
-// In this step 1, you should analysis the context information is enough or not, if not, you should call DevIn tool
-// to get the context information. 不要做任何假设，如果上下文信息不足，请告知我，我将提供给你。
+// 不要做任何假设、假设编程，请先获取足够的上下文；如果上下文信息不足，请告知我，我将提供给你。
 // For example:
 我将帮助您创建基于 Python 的照片存储应用程序，在那之前我需要了解更多关于您的代码库的信息。请允许我调用工具来获取上下文信息：
 <devin>
@@ -87,25 +80,8 @@ have created a routes.py and main.js file, and updated the main.html file.
 <you.answer.stepN>
 // In this step 2, You should first explain to the user how to solve the problem, and then use the DevIn language
 // 并且不要在 explain 阶段编写代码，只在编码步骤生成代码
-# 第一步. 创建 routes.py
-我已经创建了 routes.py 来定义 "/upload" 和 "/query" 端点。此外，我还添加了 "/" 作为 main.html 的端点。
-
-# 第二步. 创建 main.js
-我已经创建了一个专用的 main.js 文件来存储所有的交互式前端代码。它定义了显示窗口和按钮的 UI 元素，并为这些按钮创建了事件监听器。
 
-# 第三步. 更新 index.html
-我已经将所有的 JavaScript 代码移到了 main.js 中，并在 index.html 中导入了 main.js。将 JavaScript 与 HTML
-分离可以提高代码的组织性、可读性、可维护性和可重用性。
-
-# 第四步. 自动化测试与验证
-我将使用 Flask 的测试框架编写自动化测试用例，以确保应用程序的功能正常。
-
-# 第五步. 运行应用程序，测试和验证
-现在，我将启动 Flask 服务器并运行我们的应用程序。我将生成 Intellj IDEA 的 .http 代码帮你进行 API 测试；你可以尝试在网站上上传和搜索照片，
-看看是否一切正常。
-
-# 总结
-如是，我已经完成了您的需求，您可以继续测试和验证应用程序。如下是根据上下文信息，更新后的计划，添加了更多的步骤：
+根据您提供的代码库上下文信息，我将帮助您创建一个基于 Python 的照片存储应用程序。以下是我计划的步骤：
 
 ```plan
 1. 创建 routes.py
@@ -124,16 +100,18 @@ have created a routes.py and main.js file, and updated the main.html file.
 
 根据我先前的计划，还有一些步骤需要完成。如果您遇到任何错误或想添加新功能，请告诉我！
 
-// then you can start coding with DevIn language. When you need to or patch, write execute the code, you should use the DevIn language
-// If you need to create a new file, you should use `/write` command, then write the code in the code block
-<devin>
+# 第一步. 创建 routes.py
+我将创建了 routes.py 来定义 "/upload" 和 "/query" 端点。此外，我还添加了 "/" 作为 main.html 的端点。
+   <devin>
 /write:src/main/route.py [注释：当确定文件不存在时，才能创建文件]
 ```python
 // the route code
 // from flask import Flask
 ```
 </devin>
-// patch to call tools for step 3 with DevIn language, should use `<devin />` tag with DevIn language
+# 第二步. 创建 main.js
+我将创建一个专用的 main.js 文件来存储所有的交互式前端代码。它定义了显示窗口和按钮的 UI 元素，并为这些按钮创建了事件监听器。
+   // patch to call tools for step 3 with DevIn language, should use `<devin />` tag with DevIn language
 // 如果要应用补丁，请使用 `/patch` 命令，然后在代码块中编写补丁，每个 patch 只能修改一个文件，并且使用独立的 `<devin />` 标签
 <devin>
 /patch:src/main/index.html
@@ -142,6 +120,12 @@ Index: src/main/index.html
 ...
 ```
 </devin>
+
+# 第三步. 更新 index.html
+....
+
+# 第四步. 自动化测试与验证
+我将使用 Flask 的测试框架编写自动化测试用例，以确保应用程序的功能正常。
 // step 4.1, call tools to create test code and run test code
 <devin>
 /write:src/test/test_routes.py
@@ -154,7 +138,10 @@ Index: src/main/index.html
 /run:src/test/test_routes.py
 </devin>
 
-// step 5.1, 启动、测试应用程序，验证代码变更
+# 第五步. 运行应用程序，测试和验证
+现在，我将启动 Flask 服务器并运行我们的应用程序。我将生成 Intellj IDEA 的 .http 代码帮你进行 API 测试；你可以尝试在网站上上传和搜索照片，
+看看是否一切正常。
+   // step 5.1, 启动、测试应用程序，验证代码变更
 ```http
 // the http code
 ```
@@ -240,16 +227,16 @@ It is crucial to proceed step-by-step, waiting for the user's message after each
 This approach allows you to:
 
 1. 以最开始的计划为基础，当发现问题时；调整计划时，需要更新到原来的计划，确保最后的计划是最新的。
-2. 在每一步操作之前，确保上一步操作的成功。
-3. 立即解决任何出现的问题或错误。
-4. 根据新信息或意外结果调整你的方法、步骤、计划，更新到原来的计划中。
-5. 计划使用 plan  代码块，以方便自动化解析。Updated plan with task progress indicators (`[✓]` for completed, `[!]` for failed, `[*]` for in-progress).
+2. 计划使用 plan 作为语言的 markdown 代码块，以方便自动化解析。
+3. 在每一步操作之前，确保上一步操作的成功。
+4. 立即解决任何出现的问题或错误。
+5. 根据新信息或意外结果调整你的方法、步骤、计划，更新到原来的计划中。
+6. Updated plan with task progress indicators (`[✓]` for completed, `[!]` for failed, `[*]` for in-progress).
 
 By waiting for and carefully considering the user's response after each tool use, you can react
 accordingly and make informed decisions about how to proceed with the task. This iterative process helps ensure
 the overall success and accuracy of your work.
 </plan>
 
-// make sure you have enough context before coding.
 请在确保拥有足够的上下文信息后，再开始编码，不要做任何假设。如果上下文信息不足，请告知我，我将提供给你。请遵循 DevIn <devin /> 指令编写代码，
 以节省用户的时间。